一篇文章带你了解Ajax

Posted patrick-d

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一篇文章带你了解Ajax相关的知识,希望对你有一定的参考价值。

概念

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时

 

 

以上是关于一篇文章带你了解Ajax的主要内容,如果未能解决你的问题,请参考以下文章

一篇文章带你了解Java反射

小天带你了解ajax

带你了解Go语言基础之切片

一篇文章带你了解人工智能

Ajax 片段元标记 - Googlebot 未读取页面内容

一篇文章带你了解axios网络交互-Vue