一、简单学习Ajax的GET & POST请求
一、Ajax简介
我想如果使用过购物网站的话，想象一个场景，你在淘宝上看中一件物品，想加入购物车。
但是呢，你点击添加购物车后，整个页面刷新了，你之前看的物品记录也没有了，这样是不是很烦（这是因为没有使用ajax更新数据时会请求整个页面的数据，重新渲染）。
碰到这种情况，ajax就出场了，有了它，我们可以在点击添加商品后，只更新购物车中的物品数量就可以了，根本就不需要更新整个页面。
用官方一点的话来说，就是可以控制网页的局部刷新。
二、GET & POST请求实现过程
Ⅰ、GET请求实现过程
1、创建一个异步对象
const xmlhttp = new XMLHttpRequest();
xmlhttp.open(type,url,true);
3、发送请求
xmlhttp.send();
4、监听状态的变化
xmlhttp.onreadystatechange = function (){
if (xmlhttp.readyState === 4) {
//处理返回的结果
}
}
5、处理返回的结果
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
console.log(xmlhttp.responseText);
} else {
console.log("没有接收到服务器返回的数据");
}
Ⅱ、Ajax的POST请求实现过程
1、创建一个异步对象
//1、创建一个异步对象
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、设置请求方式和请求地址
// 注意：在post方式中url后面不能加参数
xmlhttp.open("POST", "ajax-post.php", true);
3、添加参数*和发送请求
//3、添加参数
//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。
//然后在 send() 方法中规定您希望发送的数据：
//此方法必须在open() 方法和 send() 之间调用
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("userName=ljm&userPwd=123456");
4、监听状态的变化
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4) {
//code...
}
}
5、处理返回的结果
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
console.log(xmlhttp.responseText);
}
else {
console.log("没有接收到服务器返回的数据");
}
三、完整代码
Ⅰ、GET请求方式过程的代码实现
//1、创建一个异步对象
//检查浏览器是否支持 XMLHttpRequest 对象
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、设置请求方式和请求地址
//解决IE缓存：在IE浏览器中如果通过Ajax发送起GET请求，那么IE浏览器认为同一个URL只有一个结果
xmlhttp.open("GET","ajax-get.txt?t=" + Math.random(),true);
//3、发送请求
xmlhttp.send();
//4、监听状态的变化
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4) {
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
console.log(xmlhttp.responseText);
} else {
console.log("没有接收到服务器返回的数据");
}
}
}
Ⅱ、POST请求方式过程的代码实现
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 在post方式中url后面不能加参数
xmlhttp.open("POST", "ajax-post.php", true);
//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。
//然后在 send() 方法中规定您希望发送的数据：
//setRequestHeader方法必须在 open() 方法和 send() 之间调用
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("userName=ljm&userPwd=123456");
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4) {
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304){
console.log(xmlhttp.responseText);
} else {
console.log("没有接收到服务器返回的数据");
}
}
}
四、XmlHttpRequest对象的方法和属性
1、方法：
-
abort(): 取消现在的连接，可以将XmlHttpRequest对象的状态值重置为0 -
open(): 初始化http的请求参数，但是不发送请求 -
send(): 发送http请求 -
setRequestHeader()：给一个打开但是未发送的请求设置参数
2、属性：
-
onreadystateChange: 状态改变触发的回调函数 -
reposeText: 从服务器返回数据的字符串格式 -
reposeXML: 从服务器返回兼容DOM的文档数据对象 -
status: 从服务器返回的状态码 -
statusText: 伴随状态码返回的信息，如status=200时，statusText=’OK’ -
readyState: 对象状态值 -
0表示XmlHttpRequest对象已创建或者已经被abort()方法重置 -
1表示对象已经初始化，但是请求还未发送（调用了open()方法，send()方法还没有调用） -
2表示请求已经发送，没有接收到响应信息（sed()方法已经被调用） -
3表示已经接收到了所有的响应头，响应体开始接收但未完成 -
4表示响应信息已经全部接收
五、问题
Ⅰ、http状态码（status）和对象的状态值(readyState)有什么区别？
http状态码是指服务器接收到请求后返回的一个状态码，而对象的状态值，是针对XmlHttpRequest对象的
Ⅱ、GRT请求和POST请求的不同
-
发送的数据数量 在 GET 中，只能发送有限数量的数据，因为数据是在 URL 中发送的。在 POST 中，可以发送大量的数据，因为数据是在正文主体中发送的。
-
安全性 GET 请求发送的数据不受保护，因为数据在 URL 栏中公开，这增加了漏洞和黑客攻击的风险。POST 请求发送的数据是安全的，因为数据未在URL栏中公开，还可以在其中使用多种编码技术，这使其有弹性。
-
加入书签中 GET 查询的结果可以加入书签中，因为它以 URL 的形式存在；而 POST 查询的结果无法加入书签中。
-
编码 在表单中使用 GET 请求时，数据类型中只接受 ASCII 字符。在表单提交时，POST 请求不绑定表单数据类型，并允许二进制和 ASCII 字符。
-
可变大小 GET 请求中的可变大小约为 2000 个字符。POST 请求最多允许 8 Mb 的可变大小。
-
缓存 GET 请求的数据是可缓存的，而 POST 请求的数据是无法缓存的。
-
主要作用 GET 请求主要用于获取信息。而 POST 方法主要用于更新数据。
Ⅲ、什么是同步方式与异步方式？
1、同步方式发送请求
发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会处于一直等待过程中。
同步请求：客户端提交请求 -> 等待服务器处理 -> 处理完毕返回 这个期间客户端浏览器不能干任何事
举个例子: 例如中午食堂吃饭: 同步就是男生请女生去吃饭，女生一开始是拒绝和你吃饭；你就不停的邀请她…一直等待…连菜都不敢点，直到对方同意..，才一起去吃饭,期间不能离开.
上述场景: 适用于准情侣或者情侣!
2、异步方式发送请求
发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。
异步请求: 客户端请求通过事件触发 -> 服务器处理（此时浏览器仍然可以做其他事情）-> 服务器处理完毕,异步的给予浏览器响应。
直白的说吧: 异步就是老公叫老婆吃饭，此时老婆可能在忙,那么老公此时可能没等老婆回复,就开始下单,点菜…等老婆回复时,此时菜饭已经点好了，开吃吧。
上述场景:适用于老夫老妻.
七、总结
1、可以看出，所谓的Ajax就是发起一个http请求。2、使用JavaScript在指定的位置，显示响应数据，从而局部修改页面的数据，达到局部刷新目的 3、服务器响应数据给ajax引擎AJAX引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据更新到浏览器页面具体位置。