Ajax详解，ajax请求的基本流程

大家好，欢迎来到IT知识分享网。

简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。AJAX是一种用于创建快速动态网页的技术。通过AJAX可以在浏览器中向服务器发送异步请求，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

什么是同步请求？

同步请求是指当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码。相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，当这个AJAX执行完毕后才会继续运行其他代码。

什么是异步请求？

异步请求就当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。一般默认值为true。异步请求可以完全不影响用户的体验效果，无论请求的时间长或者短，用户可以专心的操作页面的其他内容，并不会有等待的感觉。

XML

XML是一种可扩展标记语言，被设计用来传输和存储数据。XML和 HTML类似，但XML中没有预定义标签，全都是自定义标签，用来表示一些数据。早期 AJAX 携带的数据类型和返回的数据类型为xml形式，这也是 AJAX 名称的由来。

尽管 X 在 Ajax 中代表 XML，但由于JSON的许多优势，比如更加轻量以和作为 Javascript 的一部分，目前 JSON 的使用比 XML 更加普遍。

优缺点

优点：可以无需刷新页面而与服务器端进行通信；允许你根据用户事件来更新部分页面内容。
缺点：没有浏览历史，不能回退；存在跨域问题；SEO（搜索引擎优化）不友好，因为数据是动态创建的，爬虫是爬不到的。

ajax请求的基本流程

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

1. 创建 XMLHttpRequest 请求对象, 即创建一个异步调用对象。（ new XMLHttpRequest() ）
2. 打开请求地址，指定请求方式。（open）
   
3. 设置响应HTTP请求状态变化的函数.
4. 发送HTTP请求。（send）
5. 监听对应的请求状态的变化。（ readystatechange事件 ）
6. 读取响应数据，使用 JavaScript 和 DOM 实现局部刷新。

1.创建请求对象

为了使用 JavaScript 向服务器发送一个 http 请求，你需要一个包含必要函数功能的对象实例。这就是为什么会有 XMLHttpRequest 的原因。这是 IE 浏览器的 ActiveX 对象 XMLHTTP 的前身。随后 Mozilla，Safari 和其他浏览器也都实现了类似的方法，被称为 XMLHttpRequest。同时，微软也实现了 XMLHttpRequest 方法。

if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE 6 及以下
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }

2.打开请求地址，指定请求方式

• open() 的第一个参数是 HTTP 请求方法，有 GET，POST，HEAD 以及服务器支持的其他方法，方法一定要是大写字母，否则其他一些浏览器（比如 FireFox）可能无法处理这个请求。
• 第二个参数是你要发送的 URL。
• 第三个参数是可选的，用于设置请求是否是异步的。如果设为 true (默认值)，即开启异步，JavaScript 就不会在此语句阻塞，使得用户能在服务器还没有响应的情况下与页面进行交互。

httpRequest.open('GET', 'http://www.example.org/some.file', true);

3.设置响应HTTP请求状态变化的函数

如果你使用 POST 请求，那就需要设置请求的 MIME 类型，设置请求头。

Content-Type:用于设定请求体中参数的类型

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

4.发送HTTP请求

send() 方法的参数可以是任何你想发送给服务器的内容，如果是 POST 请求的话，数据将在请求体中发送到服务端，发送数据应该用服务器可以解析的格式，像查询语句。

httpRequest.send( "name=value&anothername="+encodeURIComponent(myVar)+"&so=on" );

如果是 GET 请求一般不传输参数

httpRequest.send();

5.监听请求状态的变化

只要 readyState 属性发生变化，就会调用相应的处理函数。这个回调函数会被用户线程所调用。XMLHttpRequest.onreadystatechange 会在 XMLHttpRequest 的readyState 属性发生改变时触发 readystatechange (en-US) 事件的时候被调用。

httpRequest.onreadystatechange = function () { }

6.读取响应数据，并做相应处理

httpRequest.onreadystatechange = function () { //readyState 是请求对象中的一个属性 4表示成功
    //status 是 http 状态码
     if (httpRequest.readyState == 4 && /^2\d{2}$/.test(httpRequest.status)) { console.log(httpRequest.status); //状态码
          console.log(httpRequest.statusText); //状态字符串
          console.log(httpRequest.getAllResponseHeaders()); //所有响应头
          console.log(httpRequest.response); //响应体
 } }

取消请求

如果该请求已被发出，XMLHttpRequest.abort() 方法将终止该请求。

httpRequest.abort()