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

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简单的请求步骤,如有错误,欢迎指正

转载于:https://www.cnblogs.com/philiptam/p/6058186.html

原生javaScript中使用Ajax实现异步通信相关推荐

【从0到1学Web前端】javascript中的ajax对象（一）
[从0到1学Web前端]javascript中的ajax对象(一) 如今最流行的获取后端的(浏览器从server)数据的方式就是通过Ajax了吧.今天就来具体的来学习下这个知识吧.假设使用ajax来訪 ...
原生JS中的Ajax
所谓Ajax,就是在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式.而我们常说的原生JS中的Ajax就是围绕XMLHttpRequest对象进行发送请求. 1.XMLHttp ...
使用fetch封装ajax_如何使用Fetch在JavaScript中进行AJAX调用
使用fetch封装ajax I will be sharing bite sized learnings about JavaScript regularly in this series. We'l ...
北风网ajax,[T8：JavaScript中利用Ajax实现客户端与服务器端通信北风网收费视频讲座.ppt...
[T8:JavaScript中利用Ajax实现客户端与服务器端通信北风网收费视频讲座 Ajax简介 XMLHttpRequest对象综合案例 1.HTTP请求现在,很多浏览器都可以直接从JavaS ...
原生JavaScript中动画与特效的实现原理
现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...
ajax后台重定向会返回什么_第三十五天JavaScript中的ajax
AJAX 1.ajax的简介本小结参考:https://blog.csdn.net/caoxuecheng001/article/details/81290643 Ajax 即"Asy ...
ajax post提交数据_第三十五天JavaScript中的ajax
AJAX 1.ajax的简介本小结参考:https://blog.csdn.net/caoxuecheng001/article/details/81290643 Ajax 即"Asy ...
解决JavaScript中使用$.ajax方式提交数组参数
一般的,可能有些人在一个参数有多个值的情况下,可能以某个字符分隔的形式传递,比如页面上有多个checkbox: $.ajax{url:"xxxx",data:{p: "1 ...
active控件和java脚本_【学习笔记】在原生javascript中使用ActiveX和插件
什么是插件现在的浏览器提供了大量的内置功能,但仍然有一些工作无法完成,如播放音频和视频.插件及其扩展浏览器功能就尤为重要. 插件是可下载的应用程序,可以插入到浏览器中,现在有很多不同的插件,常用的有 ...

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

原生javaScript中使用Ajax实现异步通信相关推荐

最新文章

热门文章