黑马程序员技术交流社区

标题: AJAX深入浅出 [打印本页]

---

作者: 黄大胖真帅    时间: 2019-11-29 15:19
标题: AJAX深入浅出
7-AJAX深入浅出
7.1原生AJAX
7.1.1AJAX简介
AJAX 全称为Asynchronous Javascript And XML，就是异步的 JS 和 XML。
通过AJAX可以在浏览器中向服务器发送异步请求。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

7.1.2XML简介
XML可扩展标记语言。
XML 被设计用来传输和存储数据。
XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。
//比如说我有一个学生数据：
// name = “孙悟空” ; age = 18 ; gender = “男” ;
//用XML表示：

孙悟空
18
男

现在已经被JSON取代了。
//用JSON表示：
{“name”:“孙悟空”,“age”:18,“gender”:“男”}

7.1.3AJAX的工作原理
Ajax的原理相当于在用户和服务器之间加了一个中间层（AJAX引擎），使用户操作与服务器响应异步化。
1
7.1.4AJAX的特点
AJAX的优点
可以无需刷新页面而与服务器端进行通信。
允许你根据用户事件来更新部分页面内容。
AJAX的缺点
没有浏览历史，不能回退
存在跨域问题
SEO不友好

7.1.5AJAX的使用
#####7.1.5.1. 核心对象
XMLHttpRequest //AJAX的所有操作都是通过该对象进行的。

7.5.1.2使用步骤(发送ajax请求)
创建xhr实例对象
绑定事件监听（监听请求成功/失败）
onreadystatechange 当readystate发生变化时触发事件
0：初始化状态， 什么都还没做
1：代表open调用了，但send方法还未调用（还没有发送请求）
2：代表send方法调用了，并且接受到了部分响应信息（接受了响应首行和响应头：响应状态码）
3：代表接受了部分响应体数据（如果响应体数据较小就全部接受，但数据如果较大，就只接受一部分）
4：代表接受了全部响应体数据
设置请求信息
请求方式
请求地址
请求参数
xhr.open(请求方式, 请求地址?查询字符串参数, 同步false/异步true);
发送请求
注意：不要通过webstorm服务器启动页面（会产生跨域错误）要通过自己的服务器打开页面
举个栗子说：
// 1. 创建xhr实例对象
const xhr = new XMLHttpRequest();
// 2. 绑定事件监听（监听请求成功/失败）
xhr.onreadystatechange = function () {
console.log(‘事件触发了’, xhr.readyState);
/if (xhr.readyState === 2) {
// 响应状态码
console.log(xhr.status);
}
if (xhr.readyState === 3) {
// 响应内容
console.log(xhr.responseText);
}
if (xhr.readyState === 4) {
// 响应内容
console.log(xhr.responseText);
}/
if (xhr.readyState === 4) {
if (xhr.status > 199 && xhr.status < 300) {
// 成功响应内容
console.log(xhr.responseText);
} else if (xhr.status > 399 && xhr.status < 600) {
// 失败的响应
console.log(xhr.responseText);
}
}
};
// 3. 设置请求信息
/*
get请求默认会缓存起来（第二次发送请求会走缓存）
chrome/firefox （相当于走协商缓存，需要访问服务器）
ie （相当于走强制缓存，不需要服务器）
问题：如果后台资源更新了，ie获取不到最新的内容
解决：请求参数加上随意数，每次请求都不一样，就不会走缓存
*/
// xhr.open(‘GET’, ‘http://localhost:3000/ajax?name=jack&age=20&date=’ + Date.now());
// xhr.open(‘GET’, ‘http://localhost:3000/ajax?name=jack&age=20&date=’ + Math.random());
xhr.open(‘POST’, ‘http://localhost:3000/ajax’);
// 设置请求头
// xhr.setRequestHeader(‘content-type’, ‘application/x-www-form-urlencoded’);
xhr.setRequestHeader(‘content-type’, ‘application/json’);
// 4. 发送请求
// xhr.send(‘name=jack&age=20’); // urlencoded编码 - form
xhr.send(JSON.stringify({name: ‘jack’, age: 20})); // json
console.log(‘全部代码执行完了~’);
}

7.1.5.3解决IE缓存问题
问题：
        在一些浏览器中（IE），由于缓存机制的存在，ajax只会发送第一次请求，剩下多次请求不会再发送给浏览器而是直接加载缓存中的数据。
解决方式：
        浏览器的缓存是根据url地址来记录的，所以我们只需要修改url地址（让其实时动态改变）即可避免缓存问题
1
2
3
4
xhr.open(“get”,"/testAJAX?t="+Date.now());
7.1.5.4AJAX请求状态
xhr.readyState 可以用来查看请求当前的状态
0. : 对应常量UNSENT，表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。

: 对应常量OPENED，表示send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP请求的头信息。
: 对应常量HEADERS_RECEIVED，表示send()方法已经执行，并且头信息和状态码已经收到。
: 对应常量LOADING，表示正在接收服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。
: 对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了
7.2jQuery中的AJAX
7.2.1get请求
$.get(url, [data], [callback], [type])
url:请求的URL地址
data:请求携带的参数
callback:载入成功时回调函数
type:设置返回内容格式，xml, html, script, json, text, _default
实例：
$.ajax({
method: ‘GET’, // 请求方式
url: ‘http://localhost:3000/ajax’, // 请求地址
data: { // 请求参数
name: ‘jack’,
age: 18
},
success: function (data) {
console.log(data); // 请求成功的响应数据
},
error: function (error) {
console.log(error); // 请求失败的具体原因
}
});
$.get(‘http://localhost:3000/ajax’, {name: ‘jack’, age: 18}, function (data) {
console.log(data);
})

7.2.2post请求
$.post(url, [data], [callback], [type])
url:请求的URL地址
data:请求携带的参数
callback:载入成功时回调函数
type:设置返回内容格式，xml, html, script, json, text, _default
实例：
$.ajax({
method: ‘POST’, // 请求方式
url: ‘http://localhost:3000/ajax’, // 请求地址
data: JSON.stringify({ // 请求参数
name: ‘jack’,
age: 18
}),
headers: { // 请求头： 默认post请求是以form表单方式发送
‘content-type’: ‘application/json’
},
success: function (data) {
console.log(data); // 请求成功的响应数据
},
error: function (error) {
console.log(error); // 请求失败的具体原因
}
});
$.post(‘http://localhost:3000/ajax’, {name: ‘jack’, age: 18}, function (data) {
console.log(data);
});

7.3跨域
进行同源策略的检查，浏览器的ajax引擎检查的。
跨域只有ajax请求可能产生，别的请求script、img、video是不会产生跨域的

7.3.1同源策略
同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。
同源： 协议、域名、端口号 必须完全相同。
违背同源策略就是跨域。

7.3.2如何解决跨域
7.3.2.1JSONP
JSONP是什么
JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get请求。
JSONP怎么工作的？
在网页有一些标签天生具有跨域能力，比如：img link iframe script。
JSONP就是利用标签的跨域能力来发送请求的。
JSONP的使用
动态的创建一个script标签
const script = document.createElement(“script”);
设置script src属性，设置请求地址?查询字符串。请求方式默认是get
script.src = ‘http://localhost:3000/ajax?name=jack&callback=fn’;
设置请求成功回调函数
window.fn = function (data) {
// 响应成功的数据
console.log(data);
};
将script标签添加到页面上，才能生效
document.body.appendChild(script);
jQuery中的JSONP

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2