【甚么是AJAX？】
1:大背景如是说
具体来说，speak with me, 诶债斯特，别读作阿积士了哦~。
AJAX = Asynchronous JavaScript and XML（触发器的 JavaScript 和 XML）。
AJAX 并非捷伊C语言，而要一类采用原有国际标准的新方法。
AJAX 最小的缺点是在不再次读取整座网页的情况下，能与伺服器互换统计数据并预览部份网页文本。
AJAX 不须要任何人应用程序插件，但须要采用者容许JavaScript在应用程序上继续执行。
2.科学知识导出：
Ajax是用 JS 发动两个允诺，并获得伺服器返回的文本。这跟从前的控制技术最小的不同之处是「网页没创下」，明显改善了采用者新体验，Chavanges。
所以他们怎样推送两个ajax允诺呢？
1. 建立两个第一类 XMLHttpRequest
var xhr = new XMLHttpRequest();为的是全力支持ie6和更早的版，要 var xhr=new ActiveXObject()
2.窃听允诺获得成功后的状况变动
3.增设允诺模块
4.发动允诺
5.操作DOM，实现动态局部创下
而甚么是两个完整的HTTP允诺呢？
接下来，他们就要窃听允诺获得成功的状况变动了
onreadystatechange：用来窃听readyState的变动的
readyState：表示当前允诺的后台的状况
status：表示处理的结果
其中readyState：表示当前允诺的后台的状况
0：允诺未初始化(还没调用open())
1：允诺已经建立，但是还没推送(还没调用send())
2：允诺已经推送，正在处理中
3：允诺正在处理中，通常响应中已经有部份统计数据能用了
4：响应已经完成，能获取并采用伺服器的响应了
而status：表示处理的结果(状况码)
1XX，表示收到允诺正在处理中
status == 200 是表示处理的结果是OK的
状况码:200到300是指服务端正常返回
304:如果网页自允诺者上次允诺后再也没更改过，应将伺服器配置为返回此响应，进而节省带宽和开销
404:找不到第一类（404 not found)
503:伺服器超时
增设允诺模块
xhr第一类接受三个模块
1：表示允诺类型
2：表示允诺的网址
3：表示是否触发器
get/post/put/delete
Get和post方法的区别：
，一般是用来查询（幂等）
post能推送统计数据，但是在采用post方法推送统计数据，须要采用setRequestHeader()来添加HTTP头，同时，post的send()方法须要写入要推送的统计数据的值, 一般用于修改伺服器上的资源，对信息数量无限制，也更安全
3常见问题
采用post提交须要忘记content-type的问题
4.解决方案
xhr.open(“post”, “/carrots-admin-ajax/a/login”,true);
xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
xhr.send(“name=” + name + “&pwd=” + code);
Content-type要作为允诺头放在open和send之间
5.编码实战
var xhr = new XMLHttpRequest();
function ip() {
var name = $(“#name”).val();
var code = $(“#code”).val();
// 指定通信过程中状况改变时的回调函数
xhr.open(“post”, “/carrots-admin-ajax/a/login”,true);
xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
xhr.send(“name=” + name + “&pwd=” + code);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
if (JSON.parse(xhr.responseText).code >= 0) {
window.location.href = “萝卜多后台管理系统“;
} else {
$(“.alert”).html(“该采用者不存在或密码不正确”);
}
}
}
};
}
$(function () {
$(“#summit”).click(function () {
var name = $(“#name”).val();
var code = $(“#pwd”).val();
$.ajax({
type: “POST”,
url: “/carrots-admin-ajax/a/login”,
data: {
“name”: name,
“pwd”: code
},
// beforeSend: function(xhr){xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);},
datatype:”json”,
success: function (data) {
console.log(data);
if (JSON.parse(data).code==0) {
alert(JSON.parse(data).message);
}
else {
alert(JSON.parse(data).message)
}
}
})
})
});
6扩展思考
Ajax有甚么缺点和缺点？
Ajax是用 JS 发动两个允诺，并获得伺服器返回的文本。这跟从前的控制技术最小的不同之处是「网页没创下」，明显改善了采用者新体验，Chavanges。
更多讨论
1. 允诺体是甚么？
允诺体将两个网页表单中的组件值通过param1=value1¶m2=value2的键值对形式编码成两个格式化串，它承载多个允诺模块的统计数据。不但报文体能传递允诺模块，允诺URL也能通过类似于“/chapter15/user.html? param1=value1¶m2=value2”的方式传递允诺模块。
2.xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
application/x-www-form-urlencoded代表甚么意思？
form的enctype属性为编码方式，常用有两种：application/x-www-form-urlencoded和multipart/form-data，默认为application/x-www-form-urlencoded。
x-www-form-urlencoded
当action为get时候，应用程序用x-www-form-urlencoded的编码方式把form统计数据转换成两个字串（name1=value1&name2=value2…），然后把这个字串append到url后面，用?分割，读取这个捷伊url。
3.jQuery怎样增设接受的统计数据类型？
采用datatype:”json”,里面写自己想要接受的统计数据类型
更多文本，能加入IT交流群565763832与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地
———————
