AJAX介绍

• 全称 Asynchronous Javascript And XML （异步的JavaScript和XML）
• 简介:AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
• 应用场景
  1.场景 1. 数据验证
  2.场景 2. 按需取数据
  3.场景 3. 自动更新页面

创建ajax的步骤

1.创建XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键，发送异步请求、接受响应以及执行回调都是通过它来完成

var xhr = new XMLHttpRequest();

2、准备请求

• 初始化该XMLHttpRequest对象使用open方法，接受三个参数：

xhr.open(method,url,async);

• 第一个参数表示请求类型的字符串，其值可以是GET或者POST。
  GET请求：

xhr.open("GET",demo.json?name=jirengu&age=24,true);

POST请求：

xhr.open("POST",demo.json,true);

• 第二个参数是要作为请求发送目标的URL。

• 第三个参数是true或false，表示请求是以异步还是同步的模式发出。（默认为true，一般不建议为false）

• true：异步模式发出的请求，请求对象收发数据的同时，浏览器可以继续加载页面，执行其他javascript代码.

• false：同步模式发出的请求会暂停所有javascript代码的执行，直到服务器获得响应为止，如果浏览器在连接网络时或者在下载文件时出了故障，页面就会一直挂起。

3. 发送请求

• 发送请求使用send方法;

xhr.send()

一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为为空。

• GET请求：

xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send();

• POST请求：
  使用send()方法中规定您希望发送的数据：

xhr.open("POST",demo.json,true);

xhr.send()

4.处理响应

xhr.addEventListener('load',function(){
if ((xhr.status>=200 && xhr.status<300) || xhr.staus ===304)
var data = xhr.responseText;
console.log(data)
})

• status 服务器的状态码
  • status属性：
    200-300:寻找成功
    304:在缓存之中寻找
    404: 未找到页面
• readyState ：本地ajax处理过程

0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。

• responseText：获得字符串形式的响应数据

xhr.responseText

• 对象转换为JSON格式使用JSON.stringify

• json转换为对象格式用JSON.parse()

• 返回值一般为json字符串，可以用JSON.parse(xhr.responseText)转化为JSON对象.

5.相关事件

• 使用load事件在XMLHttpRequest对象加载完毕后取得数据

xhr.addEventListener('load',function(){
var data = xhr.responseText;
console.log(data)
})