原生javaScript中使用Ajax实现异步通信

Posted 2020-08-19 philiptan

AJAX本质就是在HTTP协议的基础上以异步的方式与服务器进行通信,所谓异步,就是指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步.

以下开始简单介绍一下使用原生JS来如何实现AJAX异步通信

第一步:创建一个能够实现异步请求的对象  new XMLHttpRequest

var xhr=new XMLHttpRequest();
console.log(xhr.readyState);//此时的状态码输出为0,它会返回XMLHTTP请求当前状态,此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化做好准备.值为0表示对象已经存在,否则浏览器就会报错

第二步:请求报文行 xhr.open();xhr.open("get","07-register.php?name="+name);

//第一个参数传入请求方式,get/post,第二个参数是php的路径,如果是使用get方式请求还需要在后面写上需要传递的参数;
xhr.open("post","07-register.php");
//post请求只需php的路径即可
consolg.log(xhr.readyState);//此时状态码输出为1,表示正在向服务器发送数据

第三步:请求报文头  xhr.setRequestHeader();

 这里的请求报文头在get请求方式中不需要设置;

xhr.setRquestHeader(‘Content-Type‘,‘application/x-www-from-urlencoded‘)

第四步:请求报文体 xhr.send();

//get请求报文体写法
xhr.send(null);
//post请求报文体写法
xhr.send(‘name‘=name)
//参数中传入需要传递的参数

以上的请求步骤已经完成,接下来就是监听服务器的响应

xhr.onreadystatechange=function(){
      console.log(xhr.readyState)  /*此时输出2再输出3,数值2表示已经接收完全响应数据.
并为下一阶段对数据解析作好准备.状态3此阶段解析接收到的服务器端响应数据。即根据服务器端响应
头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取
的格式，为在客户端调用作好准备。状态3表示正在解析数据*/
/*判断当前的响应是否成功  1.服务器做出了响应  2.响应的结果是正确的*/
    if(xhr.status==200 && xhr.readyState==4){
                console.log(xhr.readyState);/*此阶段确认全部数据都已经解析
为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取*/

var result=xhr.responseText;
                //获取到结果
            }
}

以上就是ajax简单的请求步骤,如有错误,欢迎指正