一篇文章带你了解Ajax

Posted 2021-12-07 patrick-d

概念

Ajax 即“Asynchronous javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax的核心：　　XMLHttpRequest 对象 是Ajax的核心，一般称之为XHR对象。XHR对象在客户端与服务器之间充当中间人的角色。客户端发送的http请求将由XHR代为转发给服务器，服务器处理完http请求后将响应结果返回给XHR,XHR再返回给客户端。这个过程可以理解为发快递。XHR为快递公司，客户端A和服务器B为用户。A通过快递公司将包裹发送给B，B收到包裹后对包裹进行相应的处理并通过快递公司再发回给A，其中快递公司不用知道包裹被怎么处理了

Ajax能做些什么呢？

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。利用这种技术我们可以很方便的跟服务器进行通信，并且无需刷新页面。因为衍生了以下应用

1.验证用户名或用户密码

想必大家都有注册账户的经历吧，注册账户时通常需要用户名、密码。而有些账户用户名是不可重复的，也就是别人使用了的用户名你不可以再使用。神奇的事情来了，在你输入完用户名之后，浏览器马上就能知道用户名是否重复。Ajax就可以实现这样的功能。

 使用Ajax

下面进入干货教程，一般来说Ajax的请求分为5个步骤，在这里我将合并2个步骤变为。

1.创建一个XMLHttpRequest 对象；

2.使用open()方法与服务器进行连接

3.设置回调函数并在回调函数中对响应结果进行处理

4.向服务器发送数据

 

---

 

1.创建一个XMLHttpRequest 对象

通常我们将这个步骤封装成一个函数，如下：

 

function createXHR(){
    if(window.XMLHttpRequest){
        //现代浏览器创建的对象（IE7+,chrom,firefox,opera,safari）
        return new XMLHttpRequest();
    }else{
        //IE5,IE6浏览器创建对象
        return new ActiveXObject("Microsoft.XMLHttpRequest");
    }
}
var xhr = createXHR();　　//创建对象

 

2.使用open()方法与服务器进行连接

xhr.open("get","url",true);

get为请求方法。

url为请求地址。

true为异步请求。

3.设置回调函数并在回调函数中对响应结果进行处理

xhr.onreadystatechange = function(){
        if(xhr.readyState==4 && xhr.status==200){
            respText = xhr.responseText;
            //对响应结果respText的处理代码
        }
    }

onreadystatechange事件是在readyState属性发生改变时触发的

readyState是XMLHttpRequest的状态，其有5个状态

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

status是http状态码

4.向服务器发送数据

send(null);//请求方法为get时