zoukankan      html  css  js  c++  java

  • 异步对象连接服务器AJAX原生态

    在web中异步访问时通过XMLHttpRequest对象来实现的，要使用该对象，首先必须创建该对象吧！代码如下：

    1. var xmlHttp;  
    2. function createXMLHttpRequest() {  
    3.     if (window.ActiveXObject)  
    4.         xmlHttp = new ActiveXObject("Microsoft.XMLHttp");  
    5.     else 
    6.         xmlHttp = new XMLHttpRequest(); 

    以上代码首先声明了一个全局变量xmlHttp,这主要考虑到异步对象在整个页面进程中都有可能是用的到，然后创建异步对象的函数createXMLHttpRequest(),为了考虑到浏览器的兼容性，在该函数中主要利用if语句进行浏览器的判断，如果是IE浏览器,则采用ActiveXObject的创建方法，如果不是则直接利用XMLHttpRequest()函数.在创建异步对象之后，自然利用该对象来连接服务器，该对象有一系列有用的属性和方法，如下图：

    650) this.width=650;">

    创建完XMLHttpRequest对象后首先是利用open()方法创建一个请求，并向服务器发送，该方法的完整表达式如下：

    1. open(method,url,asynchronous,user,passpword) 

    其中method表示请求的类型，通常为get，post等，url即请求的地址，可以使绝对地址也可以使相对地址，asynchronous是一个布尔值，表示是否为异步请求，默认为异步请求true。user,passoword分别是可选的用户名，密码。创建了异步对象后，要建立一个到服务器的请求可以使用如下代码：

    1. xmlHttp.open(“get","Handler.ashx",true); 

    以上代码是用get方法请求相对地址为Handler.ashx的页面，方式是异步的，在发出请求之后便需要使用请求状态readyState属性来判断目前请求的情况，如果该属性变化了就会触发onreadystatechange事件，因此通常的代码如下：

    1. xmlHttp.onreadystatechange=function(){  
    2.     f(xmlHttp.readyState==4)  
    3.         /do something  

    也就是直接编写onreadystatechange的事件函数，如果状态为4（数据接收成功）则继续操作，但是通常情况下，不但需要判断请求的状态，还需要判断服务器返回的响应状态status，代码如下

    1. xmlHttp.onreadystatechange=function(){  
    2.     if(xmlHttp.readyState==4&&xmlHttp.status==200)  
    3.         //do something  
    4. }  

    以上两段代码仅仅是建立了请求，并编写了请求状态变化时的处理函数，然而并没有将该请求发送给服务器，还需要用send()方法来发送请求，代码如下：

    1. send(body); 

    改方法仅有一个参数body,她表示要向服务器发送的数据，其格式为查询字符串的形式，例如； var body="myName=Isaac&age=25"

    如果在open中指定是get方式，则这些参数作为查询字符串提交，如果指定的是post方式，则作为Http的post方法提交。对于send()方法而言body参数是必须的，如果不发送任何数据，则可以使用send(null);
    特别地，如果使用post方法进行提交请求，那么在发送之前必须使用如下语句来设置Http的头，语法如下：
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
     

    服务器在接收到客服端的请求后，根据请求的返回响应的结果，这个结果通常有两种形式，一种是文本形式，存储在responseText中，另一种是XML格式，存储在responseXML中，客服端程序可以对前者进行字符串的处理，对后者进行DOM相关的处理，例如可以对服务器返回的值做如下处理：

          Response.write(getElementById(“target”).innerHTML=xmlHttp

    整个代码如下：

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4.     <title></title>  
    5.     <script type="text/javascript">  
    6.         var xmlHttp;  
    7.         //创建XMLHttpRequest对象函数  
    8.         function createXMLHttpRequest() {  
    9.             if (window.ActiveXobject)//for IE  
    10.                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
    11.             else if (window.XMLHttpRequest)  
    12.                 xmlHttp = new XMLHttpRequest();  
    13.         }  
    14.         function startRequest() {  
    15.             createXMLHttpRequest();  
    16.             //利用XMLHttpRequest对象的open方法创建一个请求。第一个参数，表示请求的类型，  
    17.             //一般为get,post,第二个参数为ulr请求地址，可以是绝对地址也可以是相对地址，第三个参数是布尔值，ture表示是异步请求，  
    18.             var Url = "Handler1.ashx?" + new Date().getTime();  
    19.             xmlHttp.open("GET", Url, true);  
    20.             //在发出请求之后便需要使用请求状态readyState属性来判断目前请求的情况，如果该属性变化了，就会触发onreadystatechange事件，  
    21.             xmlHttp.onreadystatechange = function () {  
    22.                 if (xmlHttp.readyState == 4 && xmlHttp.status == 200)//如果readState的状态时4（数据接收成功）则继续操作，status=200请求成功表示  
    23.                  //服务器在接收到客服端请求后，根据请求返回相应的结果，有两种，一种是文本形式，存储在responseText中，另一种是XML格式，存储在responseXML中，客服端可以对前者进行字符串的处理，对后者进行DOM相关的处理，  
    24.                  //document.write("服务器还回：" + xmlHttp.responseText);  
    25.                     document.getElementById("target").innerHTML = xmlHttp.responseText;  
    26.  
    27.             }  
    28.             xmlHttp.send(null);//以上代码都是建立请求，send方法发出请求，对于HTTP的post请求send方法里的参数必须要有如果是post请求发送前，还需要xmlHttp.setRequest("Content-Type","application/x-www-from-urlencoded")来设置HTTP的头  
    29.         }  
    30.     </script>  
    31. </head>  
    32. <body>  
    33. <input type="button" value="测试" onclick="startRequest()" />  
    34. <br /><br />  
    35. <div id="target"></div>  
    36. </body>  
    37. </html>  
    还有三句后台代码如下：
     
    1. context.Response.CacheControl = "no-cache";  
    2. context.Response.AddHeader("Pragma", "no-cache");  
    3. context.Response.Write("异步测试成功");  
    4.         } 
    原生态的Ajax就是这个样，如果要用jQuery的话来就很容易了，我就不拉出来了，
     
    好吧就到这里了
  • 相关阅读:
    爬虫练习：使用xpath 下载站长之家简历封面模板
    爬虫练习：Xpath基本使用
    爬虫练习：使用xpath爬取彼岸图网美女图
    爬虫练习：使用re模块爬取 糗图百科 图片
    爬虫练习：使用bs4爬取诗词名句网的《三国演义》
    爬虫练习：BS4基本使用
    爬虫练习：使用requests模块 爬取化妆品生产许可信息管理系统服务平台
    爬虫练习：贴吧 https://tieba.baidu.com/f?kw=友谊已走到尽头
    爬虫练习：使用 bs4以及正则，urllib.request 爬取 豆瓣TOP250爬虫
    记录kettle错误：无法从套接字读取更多数据 / TNS包错误
  • 原文地址：https://www.cnblogs.com/ypfnet/p/2659361.html
Copyright © 2011-2022 走看看