AJAX技术基础

Posted 2021-04-15 君可缓缓归

1.什么是AJAX?

asynchronous javascript and xml，顾名思义，他代表异步的javascript和xml。

常用于表单验证，不用刷新页面就可以与服务器进行数据交互，可以实现页面的局部刷新，节约了网络流量的同时提高了用户体验。关于通信数据的承载方式，目前已经很少使用xml，因为该数据表达方式比较重量级，同时javascript操作xml也不是特别的便利。现在我们多数采用JSON的方式操作数据，因为JSON是javascript对象原生的表示方法。

2.如何实现ajax编程？

首先要发起一个ajax请求，创建一个ajax的核心对象即实例化一个XMLHttpRequest对象，他用来处理整个ajax的过程。

对象创建之后我们就应该准备去发起请求，但是在请求正式发起之前我们要做一些准备工作，这个准备工作就是通过XMLHttpRequest对象的open()方法来完成的。

该方法有四个参数，指定了当前请求的发送方式（get 还是 post），请求发给谁(目标的URL)，还有同步还是异步(同步false，异步true)。在这里open( )的作用完成一些初始化的工作，其中最关键的是第二个参数，即请求发给谁。

准备工作做好了之后，下一步就应该是发送请求。这个时候执行send()操作，当我们执行send操作时，就是向服务器发起请求。服务器收到请求之后进行结果的处理，得到了一个结果列表然后会返回给我们的浏览器。

那我们在程序代码里如何接收请求结果呢？因为我们的ajax请求是一个异步的过程，所以我们也不知道他什么时候会返回结果。为了能接受和处理请求，我们通过事件监听的方式来完成结果的获取与处理。所以我们会给在这个xhr对象绑定一个事件监听器，监听他的一个名为onreadystatechange的事件。就表示当前对象发生状态变化的事件。

3.如何使XMLHttpRequest对象实现全兼容?

对于大多数浏览器都内置了该对象，但是低版本的IE浏览器是没有内置这个对象的，所以我们为了实现全兼容，必须做一些相应的处理。

4.AJAX请求的发起

（1）open( )方法接受5个参数

第一个参数用来确定当前请求的提交方式。指定当前请求提交的方法，可以是任意的HTTP协议支持的方法。GET方法只能将数据放在URL的参数部分，POST方法可以将提交的数据放在Request的body里面。

第二个参数用来确定当前请求的目标。也就是URL。

第三个参数是用来确定当前请求的模式是同步还是异步。同步值为false，异步值为true。这个从参数的值大部分时候是true。

还有两个可选的参数，表示当前请求所需要的用户名和密码。一般很少用到这两箱项信息。

（2）send( )方法

如果send方法加了参数，就表示他会把当前参数作为POST请求的Request body附加进去。如果有多个参数用&符连接。

send所要发送数据的组织方法实际上指的就是我们当前所有发送数据的编码格式，默认情况下我们浏览器发送一个请求使用的都是一种叫urlencoded格式来发送数据。除了这种格式，我们还可以以json字符串的格式组织数据。

（3）setRequestHeader( )方法，它的作用就是给当前的请求设置一个请求头。除了设置content-type为application/json之外，也可以自定义设置请求头和值。