本文详细介绍了AJAX的概念、XML和JSON的对比、JSON的eval函数及其在AJAX中的作用。阐述了AJAX的主要特点和异步请求对象XMLHttpRequest的使用，包括其方法和属性。同时，讲解了HTTP协议的基础知识，如请求报文和响应报文，以及AJAX请求的基本操作，如GET和POST请求，JSON数据的处理。此外，还讨论了跨域问题、同源策略和JSONP的工作原理，以及解决IE缓存、请求超时等问题的方法。
AJAX简介
AJAX全称为Asynchronous JavaScript And XML，就是异步的JS和XML
是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法
通过ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式
XML简介
XML：可扩展标记语言。被设计用来传输和存储数据
XML和HTML类似，不同的是HTML中都是预定义标签，XML中没有预定义标签，全都是自定义标签，用来表示一些数据
比如：
现在有一个学生数据
name="孙悟空";age="18";sex="男";
用XML表示：
<student>
<name>孙悟空</name>
<age>18</age>
<sex>男</sex>
</student>
现在已经被json取代
JSON
全称javascript object notation（javascript标记对象）
-
是一种轻量级的数据交换格式
轻量级：体现在json体积小
数据交换：各种语言之间交换数据
-
在js中json是以对象的形式存在的
var student = { 'name' = 'liu', 'sex' = 'nan' } //这就是一个json对象 -
java的JDBC连接数据库查询数据，然后将数据拼接成json格式的字符串，将json格式的字符串传给js，然后在js当中把json格式的字符串转换成json对象，这样就可以从json对象中获取数据了，这样就完成了数据的交换
eval函数
可以将一个字符串当做一段js代码解释执行
eval('var i = 100');//相当于var i = 100;
console.log(i);//输出100
AJAX的特点
优点：
1）可以无需刷新页面而与服务器端进行通讯
2）允许你根据用户事件来更新部分页面内容
缺点：
1）没有浏览历史，不能回退
2）存在跨域问题（同源）
3）SEO不友好（搜索引擎）
异步请求对象（XMLHttpRequest）
在局部刷新中，使用异步请求对象，在浏览器内部发起请求，获取数据
异步对象是在浏览器内部的一种javascript对象。
语法:
var xhr = new XMLHttpRequest();
创建后就可以使用xhr对象的属性或者函数，进行异步对象操作
使用异步对象实现局部刷新，异步对象主要负责发起请求，传递请求参数，并从服务器接收数据
局部刷新需要使用的技术：
-
javascript：创建XMLHttpRequest对象，调用它的属性或方法
-
dom：处理dom，更新select的数据
-
css：处理视图，更新，美化
-
servlet：服务器端技术
-
数据格式：json
把这些技术综合的使用叫做ajax
异步对象的属性和方法
方法：
1）open(请求方式,服务器端的访问地址,布尔值)
请求方式：get、post
服务器端的访问地址：url
布尔值：决定异步还是同步,可以省略
如：xhr.open('get','loginServlet')
2）send()
使用异步对象发送请求
属性：
1）readyState：请求的状态。共有五个值：0、1、2、3、4
2）status：网络的属性，和http的状态码对应（200,404,500）
3）rasponseText：表示服务器端返回的数据
异步对象使用步骤
1）使用js创建异步对象
var xhr = new XMLHttpRequest();
2）给异步对象绑定事件。事件名称为onreadystatechange
xhr.onreadystatechange = function(){};
当readystate值发生变化时，执行函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status >= 200 && xhr.status < 300){
var data = xhr.responseText;
document.getElementById('mydiv').innerHTML = data;
};
};
3）初始请求的参数执行open()函数
xhr.open('get','loginServlet',true);
4）发送请求，执行send()函数
xhr.send();
HTTP协议
超文本传输协议，协议详细规定了浏览器和万维网服务器之间互相通信的规则
请求报文
-
请求行 method url GET /product_detail?id=2 POST /login
-
多个请求头 Host: www.baidu.com Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706; Content-Type: application/x-www-form-urlencoded 或者application/json
-
请求体 username=tom&pwd=123 {"username": "tom", "pwd": 123}
HTTP 响应报文
-
响应状态行: status statusText
-
多个响应头 Content-Type: text/html;charset=utf-8 Set-Cookie: BD_CK_SAM=1;path=/
-
响应体 html 文本/json 文本/js/css/图片...
API总结
-
XMLHttpRequest()：创建 XHR 对象的构造函数 -
status：响应状态码值，如 200、404 -
statusText：响应状态文本，如 ’ok‘、‘not found’ -
readyState：标识请求状态的只读属性 0-1-2-3-4 -
onreadystatechange：绑定 readyState 改变的监听 -
responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应 -
response：响应体数据，类型取决于 responseType 的指定 -
timeout：指定请求超时时间，默认为 0 代表没有限制 -
ontimeout：绑定超时的监听 -
onerror：绑定请求网络错误的监听 -
open()：初始化一个请求，参数为：(method, url[, async]) -
send(data)：发送请求 -
abort()：中断请求 （发出到返回之间） -
getResponseHeader(name)：获取指定名称的响应头值 -
getAllResponseHeaders()：获取所有响应头组成的字符串 -
setRequestHeader(name, value)：设置请求头
express
在vsc的资源管理器空白处右键——在集成终端打开——输入npm init --yes 初始化——输入npm i express
//新建一个js文件，进行如下操作
//1. 引入express
const { application } = require('express');
const express = require('express');
//2. 创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/', (request, response) => {
//设置响应头——设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
//响应体只能接收字符串
response.send('hello');
});
//4.监听端口启动服务
app.listen(8000, () => {
console.log('服务器,8000端口监听中....');
});
//5.右键文件选择在集成终端打开，输入node 文件名
//6.在网页输入127.0.0.1:8000就可以得到hello
上一个端口还在响应时不能运行下一个端口----关闭上一个端口，集成终端右上角选择node，ctrl+c关闭端口
AJAX请求的基本操作
get请求
<style>
#result {
width: 200px;
height: 100px;
border: 1px solid #90b;
}
</style>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取元素
var btn = document.querySelector('button');
var res = document.querySelector('#result');
//绑定事件
btn.onclick = function () {
//创建对象
var xhr = new XMLHttpRequest();
//初始化 设置请求方法和url
xhr.open('GET', 'http://127.0.0.1:8000/server');
//发送
xhr.send();
//事件绑定 处理服务端返回的结果
//onreadystatechange
//on有when的意思，当···的时候
//redystate 是xhr对象中的属性，表示状态，共有五种值
//最开始为0——未初始化
//1——open方法已经调用完毕
//2——send方法已经调用完毕
//3——服务端已经返回了部分结果
//4——服务端已经返回了全部结果
//change 改变
xhr.onreadystatechange = function () {
//判断-服务端返回了所有结果
if (xhr.readyState === 4) {
//判断，响应状态码——200、404、403、401、500
//响应状态码中2开头的，都表示成功2xx
if (xhr.status >= 200 && xhr.status < 300) {
//处理结果.结果分为四部分——行，头，空行，体
//响应行
console.log(xhr.status);//状态码
console.log(xhr.statusText);//状态字符串
//所有的响应头
console.log(xhr.getAllResponseHeaders());
//响应体
console.log(xhr.response);
//设置result的文本
res.innerHTML = xhr.response;
} else {
};
};
};
};
</script>
</body>
//1. 引入express
const { application } = require('express');
const express = require('express');
//2. 创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server', (request, response) => {
//设置响应头——设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
response.send('hello');
});
//4.监听端口启动服务
app.listen(8000, () => {
console.log('服务器已经启动,8000端口监听中....');
});
设置请求参数
//在url后用?接参数，如：
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200');
//如果需要传递多个参数，用&隔开
post请求
<style>
#result {
width: 200px;
height: 100px;
border: 1px solid skyblue;
}
</style>
<body>
<div id="result"></div>
<script>
//获取元素
var res = document.querySelector('#result');
//绑定事件
res.addEventListener('mouseover', function () {
//创建对象
var xhr = new XMLHttpRequest();
//初始化 设置类型与url
xhr.open('post', 'http://127.0.0.1:8000/server');
//发送
xhr.send();
//事件绑定
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
res.innerHTML = xhr.response;
};
};
};
});
</script>
</body>
//1. 引入express
const { application } = require('express');
const express = require('express');
//2. 创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server', (request, response) => {
//设置响应头——设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
response.send('hello');
});
app.post('/server', (request, response) => {
//设置响应头——设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
response.send('hello');
});
//4.监听端口启动服务
app.listen(8000, () => {
console.log('服务器已经启动,8000端口监听中....');
});
设置请求参数
//post方法在send中添加
xhr.send('a=100&b=200');
//里面的参数还可以设置为a：100b：200或1234567等
设置请求头
//在 xhr.open('post', 'http://127.0.0.1:8000/server');后添加一个参数
xhr.open('post', 'http://127.0.0.1:8000/server');
//设置请求头
xhr.setRequestHeader('Context-Type','application/x-www-form-urlencoded');
//Context-Type——设置请求体内容类型
//里面的参数可以自定义，但是会报错，解决方案：在app中添加一个参数
//将app.后的参数改为all，意为可以接收任意类型的请求
app.all('/server', (request, response) => {
//设置响应头——设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//添加的参数
response.setHeader('Access-Control-Allow-Headers', '*');//意为所有类型的头信息都可以接收
//设置响应体
response.send('hello');
});
服务端响应json数据
app.all('/server', (request, response) => {
//设置响应头——设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//响应一个数据
var data = {
name:'wo'
};
//将对象进行字符串转换
var str = JSON.stringify(data);
//设置响应体
response.send('str');
});
自动转换
//在绑定事件中添加一组参数
xhr.responseType = 'json';
//事件绑定
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
res.innerHTML = xhr.response.name;//输出wo
};
};
};
手动转换
//事件绑定
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
var data = JSON.parse(xhr.response);
result.innerHTML = data.name;//输出wo
};
};
};
安装nodemon自动重启工具
文件内容有修改自动重新启动服务 nodemon - npm
安装
//在集成终端中输入 npm install -g nodemon
启动服务
ndoemon 文件名
安装nodemon: 1.不要停止监听，下拉另外打开一个终端powershell。2.用管理员身份打开powershell 输入：set-ExecutionPolicy RemoteSigned。3.停止监听，重新打开集成终端，输入nodemon 文件名
解决IE缓存问题
问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。 解决方式：浏览器的缓存是根据url 地址来记录的，所以我们只需要修改url 地址即可避免缓存问题
xhr.open("get","/http://127.0.0.1:8000/ie?t="+Date.now());
请求超时与网络异常处理
// 超时设置 （2秒）
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function(){
//如果2s内没有返回结果，则弹出
alert('网络超时，请稍后重试')
}
// 网络异常回调
xhr.onerror = function(){
//如果网络异常则弹出
alert('网络异常，请稍后重试')
}
AJAX取消请求
// 手动取消 xhr.abort();
AJAX请求重复发送问题
<button>
点击发送
</button>
<script>
var btn = document.querySelector('button');
var xhr =null;
var isSending = false;
btn.onclick = function(){
xhr = XMLHttpRequest();
//判断表示变量
if(isSending) x.abort;
isSending = true;
xhr.open('get','http://127.0.0.1:8000/delay');
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.redyState === 4){
isSending = false;
}
}
}
</script>
jQuery发送AJAX请求
百度搜索bootcdn，搜索jQuery，点击jQuery复制<script>标签，引入
get请求
$.get(url, [data], [callback], [type])
-
url:请求的URL 地址
-
data:请求携带的参数
-
callback:载入成功时回调函数
-
type:设置返回内容格式，xml, html, script, json, text, _default
post请求
$.post(url, [data], [callback], [type])
-
url:请求的URL 地址
-
data:请求携带的参数
-
callback:载入成功时回调函数
-
type:设置返回内容格式，xml, html, script, json, text, _default
$.post('https://127.0.0.1:8000/server',{a:100,b:200},function(data){
)};
通用方法
$.ajax({
// url
url: 'http://127.0.0.1:8000/jquery-server',
// 参数
data: {a:100, b:200},
// 请求类型
type: 'GET',
// 响应体结果
dataType: 'json',
// 成功的回调
success: function(data){console.log(data);},
// 超时时间
timeout: 2000,
// 失败的回调
error: function(){console.log('出错拉~');},
// 头信息
headers: {
c: 300,
d: 400
}
})
同源策略
-
同源策略(Same-Origin Policy)最早由Netscape 公司提出，是浏览器的一种安全策略
-
同源： 协议、域名、端口号必须完全相同
-
跨域： 违背同源策略就是跨域
如何解决跨域
jsonp
JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get 请求。
jsonp是怎么工作的
在网页有一些标签天生具有跨域能力，比如：img link iframe script。JSONP 就是利用script 标签的跨域能力来发送请求的。
扫一扫
2546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
