- Ajax是什么？
Asynchronous JavaScript + XML(异步JavaScript和XML) [ Ajax](Ajax - Web 开发者指南 | MDN (mozilla.org))
- Ajax的应用场景?
- 在不重新加载页面的情况下发送请求给服务器
- 接受并使用从服务器发送来的数据
- Ajax基础
- 使用XMLHttpRequest构造函数创建XMLHttp实例对象
//发送http请求
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveObject) {
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
- 发送请求后，会收到响应，这时，需要告诉XMLHttp请求对象是由哪一个js函数来处理响应，即设置对象的onreadystatechange属性，当状态改变时调用函数
//注意：函数名后没有参数，这里是把一个引用赋值给了函数，而不是真正的调用了它
xhr.onreadystatechange = nameofTheFunction;
//或者可以使用js的匿名函数响应处理的动作
xhr.onreadystatechange = function(){
//处理响应的代码操作
}
- 处理服务器响应操作
//通过调用HTTP请求对象的open()和send()方法
xhr.open('GET','url',true);
xhr.send();
open()第一个参数是HTTP请求方法-有GET，POST,HEAD以及服务器支持的其他方法。第二个参数是你要发送的URL。出于安全考虑，默认不可以调用第三方URL域名。第三个参数是可选的，用于设置请求是否是异步的，如果为true(默认值)，即开启异步，js就不会在该语句处阻塞，使得用户能在服务器还没有响应的情况下与页面进行交互。 send()方法的参数可以是任何你想发送给服务器的内容，如果是POST请求的话，发送表单数据时应该用服务器可以解析的格式，像查询语句
："name=value&anothername="+encodeURIComponent(my Var)+"&so=on"或者其他格式，类似multipart/form-data,JSON,XML等。
注意：若使用的是POST数据，那就需要设置请求的MIME类型。比如，在调用send()方法获取表单数据前要有下面这个：
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
所以，我们提供的js函数应该做什么处理呢？
//首先检查请求的状态。如果状态的值是XMLHttpRequest.DONE(对应的值是4),意味着服务器响应收到了并且是没问题的，然后可以继续执行。
if (xhr.readySate === XMLHttpRequest.DONE) {
} else {
}
XMLHttpRequest的一些状态值：
- 0 (未初始化) or (请求还未初始化)
- 1 (正在加载) or (已建立 服务器链接)
- 2 (加载成功) or (请求已接受)
- 3 (交互) or (正在处理请求)
- 4 (完成) or (请求已完成并且响应已准备好)
//检查HTTP响应码，来判断AJAX有没有成功
if (xhr.status === 200) {
} else {
}
- 接下来，可以用服务器返回的数据做任何你想做的了。有两个方法可以去访问这些数据:
xhr.responseText-服务器以文本字符的形式返回xhr.responseXML-以XMLDocument对象的方式返回，之后就可以使用js来处理
使用 XMLHttpRequest - Web API 接口参考 | MDN (mozilla.org)](developer.mozilla.org/zh-CN/docs/…))
