AJAX
Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，是一种在不刷新网页的情况下，实现和后台服务器间的数据交换，并更新部分网页内容的技术。
同步：JS代码按顺序依次执行，前面代码没有执行完，后面代码不会被执行。
异步：JS代码不按顺序执行，在执行某段代码的同时执行另一段代码。AJAX默认就是异步的，当AJAX发送请求后，在等待服务器端返回数据的这个过程中，前台会继续执行AJAX后面的JS语句，当服务器端返回正确的结果才会去处理返回的数据。另外setInterval方法就是一个异步执行的函数。
window.setInterval(function(){console.log(1)},100)
window.setInterval(function(){console.log(2)},100)AJAX执行的基本原理
AJAX的工作原理类似于现实生活中的书信往来，现实生活中的给朋友发信需要如下步骤
- 准备信纸
- 书写信的内容
- 寄信
- 接收回信
- 读回信
AJAX和后台信息和数据的交互也是需要这样的五步
- 创建通信对象 —— var xhr = new XMLHttpRequest();
- 初始化通信对象 —— xhr.open("get/post","url");
- 发送数据请求 —— xhr.send();
- 开始接受服务器返回的数据 —— 不需要操作
- 数据接受完成后，处理数据 —— var str = xhr.responseText;
ajax最核心的技术点：在JS中使用xhr对象向服务器发送请求。谁发请求，谁接响应。
XMLHttpRequest对象
XMLHttpRequest对象是AJAX中的通信对象，是AJAX的基础，用于在后台与服务器交换数据。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）
方法
open方法
作用：初始化通信对象，即封装要请求的内容（请求类型、请求文件地址路径、异步/同步）
格式：通信对象.open(参数1，参数2，参数3);
参数1：设置请求类型，值为字符串类型的get或post，两种请求类型的区别
参数2：被请求文件在服务器上的地址路径，值为字符串类型。被请求文件可以是任意类型，如.txt/.xml/.json
参数3：设置是否采用异步方式，值为true、false可以省略，如果省略为true
- true：采用异步
- false：采用同步，如果采用同步，那么当服务器很繁忙会AJAX操作很复杂，那么应用程序会挂起或停止。所以不建议采用同步模式（如果是同步，那么把要操作的代码直接写在send方法后既可，不需要onreadystatechange对应的事件函数）
send方法
作用：发送请求
格式：通信对象.send(参数);
说明：如果请求类型为post，那么将发送给后台的请求参数放到send中，如果是get类型，那么send中的参数为null
属性
responseText属性
返回字符串形式的响应。如果 readyState小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。
responseXML属性
如果服务器返回的内容是XML数据，使用该属性获取数据，返回结果为object类型
onreadystatechange事件
如果采用异步模式，那么发送一个请求后，客户端无法确定什么时候会完成这个请求（即我们不知道数据是否已经返回），此时我们需要对请求的状态做监测——onreadystatechange事件，该事件在请求状态发生改变时被触发。那么XMLHttpRequest通信有什么状态呢，如何获取它的状态呢——readyState属性，该属性存有XMLHttpRequest的状态
请求的状态属性（readyState）
0——通信对象已创建或已被abort()方法重置，但没有初始化
1——open()方法已调用，但send()方法未调用，通信对象已初始化，但请求没有发送
2——send()方法已调用，HTTP请求已发送到WEB服务器，服务器接收到请求，但还没有响应
3——所有响应头部都已经接收到，响应体开始接收但未完成
4——HTTP响应已经完全接收
响应的状态属性（status）
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——服务器响应正常
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端上次已经执行了GET，且文件未变化，建议从缓存中取
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——没有访问权限
404——没有发现文件、查询或URl，访问的资源不存在
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500——服务器产生内部错误，500以上都是服务器错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本
响应的HTTP状态码，字符串形式（statusText）
AJAX操作的流程
1.创建XHR对象
针对不同的浏览器，创建XHR对象的方式是不一样
var xhr;
function createXHR() {
//对于大多数浏览器都适用的
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
//要考虑浏览器的兼容性
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
//如果浏览器有ActiveXObject对象，但没有Microsoft.XMLHTTP的参数
if(!xhr){
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
}
}2.打开连接open方法
xhr.open("get/post","url");3.监听通信
xhr对象绑定回调方法，这个回调方法会在readyState状态改变的时候被调用
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200 || xhr.status == 304) {
}
}
}4.使用XHR对象发送请求
xhr对象的send方法，向服务器发送请求。
xhr.send();5.使用XHR对象的响应获得响应文本
<script type="text/javascript">
function myAjax(type, url, isAsyn, data) {
var xhr;
//第一步：创建通信对象
function createXHR() {
//对于大多数浏览器都适用的
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
//要考虑浏览器的兼容性
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
//如果浏览器有ActiveXObject对象，但没有Microsoft.XMLHTTP的参数
if(!xhr){
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
}
}
if (type.toLowerCase() == 'get') {
//为url地址后面拼接一个？
url += "?";
//变量data中的属性
for (var proName in data) {
url += (proName + "=" + data[proName] + "&");
}
//去除字符串后面的&
url = url.substr(0, url.length - 1);
data = null;
} else {
data = JSON.stringify(data);
}
createXHR();
//监听通信
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200 || xhr.status == 304) {
//数据处理方式
var json = xhr.responseText;
var obj = JSON.parse(json);
console.log(obj);
}
}
}
//第二步：初始化通信对象
xhr.open(type, url, isAsyn);
//发送请求
xhr.send(data);
}
//调用myAjax方法，向服务器发送数据请求，并处理返回结果
myAjax("get", "http://localhost:8080/ajax.json", true, {name: "Tom", age: 10});
</script>ajax最终版，优化通信对象创建方法，创建回调函数优化待处理数据方法。
<script type="text/javascript">
function myAjax(type, url, isAsyn, data, callback) {
//调用创建通信的对象的方法，创建对象
var xhr = createXHR();
//为图像对象添加事件，监听通信状态
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200 || xhr.status == 304) {
//获取数据
var json = xhr.responseText;
//解析json字符串
var obj = JSON.parse(json);
//调用回调函数
callback(obj);
}
}
}
//判断请求类型
if (type.toLowerCase() == 'get') {
//先在ulr后面拼接？
url += "?";
//遍历参数对象，实现url地址的拼接
for (var pro in data) {
url += (pro + "=" + data[pro] + "&");
}
//截取url
url = url.substr(0, url.length - 1);
//将data赋值为null
data = null;
} else {
data = JSON.stringify(data);
}
xhr.open(type, url, isAsyn);
//发送请求
xhr.send(data);
}
function createXHR() {
if (XMLHttpRequest == undefined) {
//准备ActiveXObject的参数
var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
for (var i = 0; i < versions.length; i++) {
//创建通信对象
try {
return new ActiveXObject(versions[i]);
} catch (e) {
}
}
} else {
return new XMLHttpRequest();
}
}
//调用myAJAX方法，实现通信
myAjax('post', 'http://localhost:80/day9/demo.json', true, {name: "Tom", age: 10}, function (obj) { alert(obj.name); });
</script>
</body>
</html>
扫一扫
3755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
