Ajax 运行原理及实现

Ajax 运行原理

Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。

Ajax 的实现步骤

1. 创建 Ajax 对象

 var xhr = new XMLHttpRequest();

2. 告诉 Ajax 请求地址以及请求方式

 xhr.open('get', 'http://www.example.com');

3. 发送请求

xhr.send();

4. 获取服务器端给与客户端的响应数据

 xhr.onload = function () {
     console.log(xhr.responseText);
 }

服务器端响应的数据格式
在真实的项目中，服务器端大多数情况下会以 JSON 对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中。
在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。

JSON.parse() // 将 json 字符串转换为json对象

请求参数传递

1.GET 请求方式

xhr.open('get', 'http://www.example.com?name=zhangsan&age=20');

2.POST 请求方式

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 
xhr.send('name=zhangsan&age=20');

请求参数的格式

1. application/x-www-form-urlencoded

name=zhangsan&age=20&sex=男

2. application/json

{name: 'zhangsan', age: '20', sex: '男'}

在请求头中指定 Content-Type 属性的值是 application/json，告诉服务器端当前请求参数的格式是 json。

JSON.stringify() // 将json对象转换为json字符串

注意：get 请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的。