码迷,mamicode.com
首页 > Web开发 > 详细

原生态ajax

时间:2017-10-07 18:36:41      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:hello   function   active   页面   句柄   改变   朋友   条件   两种   

 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()里。

 

原生态ajax

标签:hello   function   active   页面   句柄   改变   朋友   条件   两种   

原文地址:http://www.cnblogs.com/liuzhiw/p/7635273.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!