原生态ajax

Posted 2020-10-09 既来之,则安之!

 1  var xmh=null;
 2             if(Window.XMLHttpRequest)
 3             {
 4                 xmh=new XMLHttpRequest();
 5             }
 6             else{
 7                 xmh =new ActiveXObject("Microsoft.XMLHTTP");
 8             }
 9             xmh.open("POST","/AjaxServlet?uname="+$("[name=uname]").val(),true);
10             xmh.onreadystatechange=function () {
11                 if(xmh.readyState==4&&status==200){
12                     var date=xmh.responseText;
13                     alert(date);
14                 }
15 
16             }
17             xmh.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
18             xmh.send(null);

 

该方法有三个参数第一个参数是说明Http方法，有两种形式一种是“get",另一个种是”post",两者的区别就相当于表单提交时如果使用get方法，就可以在url里看到提交的值，是显示的，不安全，post是隐式的，看不到提交的值，相对比较安全，上边的示例我们采用的是“get"方法，本文最后我会跟大家演示一下”post“方法。

第二个参数是一个url也就是后台要处理的页，也就是相对于执行代码的当前页面（使用绝对路径），本例中是“SayHello.ashx？Name="+name+"&i="+Math.Random()，做过asp.net 开发的朋友相信对这个一定都不陌生，是的，这里就相当于querystring传值，把你需要传递的值通过这种方法传递进入，如果有多个值的话跟QueryString一样使用“&”分割开来，后边又跟了一个参数”i“这里采用Math.Random()产生随机数，主要是为了解决的浏览器缓存问题，这样没每次提交的数据都不会一样，很好的解决了缓存问题。

第三个参数为是否设置为异步，在这里我们当然选择是异步操作，设置为"true"即可。

同步与异步的区别如下：

同步请求：发生请求后，要等待服务器执行完毕才继续执行当前代码。

异步请求：发生请求后，无需等到服务器执行完毕，可以继续执行当前代码

紧跟着下边是HttpRequest的onreadystateChange属性，具体可以理解为每次 readyState 属性改变的时候调用的事件句柄函数，所以在其后边紧跟了一个匿名的函数

在该匿名函数里首先在if条件判断里又用到了HttpRequest的两个属性，分别介绍下，

第一个是HttpRequest.readyState,还记得我们在上边open（）函数里设置的第三个参数，也就是是否设置为异步吗，我们设置的为true，也就是异步请求，所以在请求过程中javascript代码会继续执行，这时可以通过readyState属性判断请求的状态，当readyState = 4时，表示收到全部响应数据，属性值的定义如下：

send()方法接受一个参数，如果是用“get”的方式请求这里边可是设置为null也可以什么都写，因为“get"的方式所需传的值都通过url传递了，如果是”Post“的请求方式，则传递的参数可以写在send（）里。