1. 什么是Ajax(Asynchronous Javascript and XML)?
略答:一种更新网页的技术。
简答:在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通俗易懂的说:
就是没用AJAX技术的网页,你点一个按钮就要刷新整个页面,尽管新页面上只有一行字和当前页面不一样,但你还是等待页面刷新。用了AJAX之后,你点击,只有需要更新的部分刷新,不用整个页面刷。
1.1 Ajax全称
Ajax全称: Asynchronous Javascript and XML ,即异步的JS和XML。
异步,在这里简单地解释就是:向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果我们可以再来处理这个事。
2.Ajax工作原理
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。
要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。以下简称XHR。
XHR相当于是一个送外卖的,来负责客户端与服务器之间的通信传输。举个栗子:
大中午饿了,小张(客户端)点了个外卖,那小张不可能就一直干等着送外卖的(XHR)然后什么也不敢,所以在这个过程中小张(客户端)就该干啥干啥。等送外卖的(XHR)从店里(服务器)那里拿外卖过来了,小再拿外卖(接收数据)、开始吃(客户端把数据渲染到页面)等一系列操作。
这也就是Ajax的异步原理。
3. XMLHttpRequest对象的属性。
readyState
属性存留 XMLHttpRequest 的状态。
onreadystatechange
属性定义当 readyState 发生变化时执行的函数。
status
属性和 statusText
属性存有 XMLHttpRequest 对象的状态。
readyState
: XMLHttpRequest对象状态值
0 (未初始化) 对象已建立,请求未初始化(尚未调用open方法)
1 (初始化) 服务器连接已建立,尚未调用send方法
2 (发送数据) send方法已调用,但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
status
:从服务器返回的数字代码,常见如下:
200: “OK”
403: “Forbidden”
404: “Page not found”
statusText 返回状态文本(例如 “OK” 或 “Not Found”)
每当 readyState 发生变化时就会调用 onreadystatechange 函数。
当 readyState 为 4,status 为 200 时,响应就绪。
4.原生ajax的请求总结
不同的浏览器有自己实现AJAX的组件,所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。但总体有一下几个步骤:
1.创建XHR对象
2.调用open()方法创建请求
3.调用send()方法发送请求
4.onreadychange捕获请求的状态码
5.判断状态吗是否成功
6.调用ajax的responseText属性返回数据
5. Ajax 实现语法
5.1 创建 XMLHttpRequest
创建 XMLHttpRequest 的语法是:
variable XHR = new XMLHttpRequest();
5.2 规定请求的类型 open(method, url, async)
method:请求的类型:GET 还是 POST
url:服务器(文件)位置
async:true(异步)或 false(同步)(默认是true,可以不写)
// 2. 初始化, 设置请求方法和url
xhr.open('GET', 'http://127.0.0.1:8000/server',true);
5.3 向服务器发送请求
send() 向服务器发送请求(用于 GET)
send(string) 向服务器发送请求(用于 POST)
// 3. 发送
xhr.send();//(用于 GET)
5.4 GET 还是 POST?
GET 比 POST 更简单更快,可用于大多数情况下。
不过,请在以下情况始终使用 POST:
- 缓存文件不是选项(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 无大小限制)
- 发送用户输入(可包含未知字符),POST 比 GET 更强大更安全
5.4.1像 HTML 表单那样 POST 数据
通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定需要发送的数据:
方法 :
setRequestHeader(header, value) 向请求添加 HTTP 头部
- header:规定头部名称
- value:规定头部值
实例:
xhttp.open("POST", "'http://127.0.0.1:8000/server'", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");
5.5接收响应
//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据
5.6 判断状态吗是否成功并调用ajax的responseText属性返回数据
xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
console.log(text);
}
}