大家好，我是路飞写代码，前端工程师，让我们一起分享知识，拥抱未来!

ajax知识点

Ajax简介

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，它能够让我们前端去请求服务器，然后服务器返回给前端必要的信息，然后我们就可以根据服务器返回的结果进行界面更新等操作，这样就保证我们可以不用去刷新请求整个页面，局部改变Dom界面。

那么传统的不使用Ajax的网站，势必要重新加载整个页面，当然这已经是过去时了，不过也有一些静态博客，也是没有用到ajax，这是特例。大部分网页都使用了ajax来进行前后端的数据交互。

F5刷新整个页面

Ajax工作原理图

很简单，其实就是一个握手协议，前端发送了Http请求，后台接收请求并给出响应的一条握手协议过程。

ajax工作原理图创建

创建原生Ajax对象

XMLHttpRequest 是 AJAX 的基础，所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。那么我们下面来创建一个ajax对象

const instance = new XMLHttpRequest();

这样我们就创建了一个用于进行ajax交互的对象。

当然我们这儿提及一下老版本的ie5、ie6的javascript对象都是使用ActiveX来实现的标准，所以没有XMLHttpRequest对象。他们创建一个对象使用这种方式

const instance = new ActiveXObject("Microsoft.XMLHTTP");

其实我们了解一下就行了，这块在你的代码也不用加上了，现在所有的网站应该都放弃了对低版本ie的支持，这个已经退出了历史舞台，了解一下情况即可。

Ajax发送请求

首先来看一下XMLHttpRequest如何发送一个请求到服务器

const instance = new XMLHttpRequest();

instance.open(method,url,async);

instance.send();

这里用到了两个方法，第一个open方法其实是配置ajax必要的信息，第二个send才是真正的发起请求到服务器。

这儿我们说一下async这个参数，这个是配置请求是同步还是异步的，如果为true则是异步执行，不阻碍后续代码的执行，如果为false，程序会暂停在那儿等待结果返回，这样就会导致浏览器出现假死状态，影响界面的加载。所以这个属性基本上不推荐使用了，为了解决这个问题，现代浏览器都是通过Promise Api来进行操作。

Ajax通过readyState状态的变化接收服务器响应

当请求被发送到服务器时，我们需要执行一些基于响应的任务，每当 readyState 改变时，就会触发 onreadystatechange 事件，readyState 属性存有 XMLHttpRequest 的状态信息。

我们可以看到XMLHttpRequest有一个状态存储函数，存储了状态的变化情况，我们可以通过这个来判断请求到了哪一步，一般到4并且status===200的时候我们认为此请求成功。

const instance = new XMLHttpRequest();

instance.onreadystatechange=function(){

if(xmlhttp.readyState==4 && xmlhttp.status==200){

// 做一些成功的操作

}

}

到此我们就基本上讲解完ajax的功能点。你现在应该也可以自己去尝试做一些ajax请求试验一下。

进级苦恼之跨域请求

跨域是所有前端都必须去面对的一个棘手的问题，当你去请求其他服务器的资源时，浏览器安全限制会阻止该请求。你的请求不会到底服务器，被浏览器阻止了，这也是遵循了同源策略。

那么如何去解决这个跨域呢，通用的有几种方法，但是核心都是需要服务器去配合处理跨域，前端自己无法处理跨域。

第一个采用JsonP方法，这个方法其实也是需要后台去配合处理，由后台来进行请求，然后将数据拼装在一个json对象返回到前台，然后前台通过callback函数来进行操作。这个也比较繁琐。

第二种就是服务端去放一个跨域文件crossdomain.xml放置到服务器端，然后写上可以跨域的ip地址。

第三种配置反向代理服务器，通过代理服务器我们也其实是代理服务器去请求外围，然后转发到我们的服务器上。这样也可以防止跨域。

那么这几种方法都是需要服务器来配合的。

我是路飞写代码，前端工程师，让我们一起分享知识，拥抱未来!（本文由路飞写代码原创
）

 

关键词： ajax 教程