简易解析ajax,javascript-XMLHttpRequest

XMLHttpRequest可以提供不重新加载页面的情况下更新网页

  1. <!DOCTYPE html>  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.     <script src="jquery-1.7.min.js" type="text/javascript"></script>  
  7.     <title>解析XMLHttpRequest</title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.         <div>  
  12.             <input type="text" name="search" id="search" />  
  13.             <input type="button" name="go" id="go" value="搜索" />  
  14.             <div id="result"></div>  
  15.         </div>  
  16.     </form>  
  17. </body>  
  18. </html>  
  19. <script type="text/javascript">  
  20.     var xhr = null;  
  21.     $(function () {  
  22.         $("#go").click(function () {  
  23.             var str = $("#search").val();  
  24.             if ($.trim(str) == "") {  
  25.                 $("#result").html("请输入要搜索的内容.");  
  26.             }  
  27.             else {  
  28.                 _search(str);  
  29.             }  
  30.         });  
  31.     });  
  32.     function _search(str) {  
  33.         // 对于 IE7+, Firefox, Chrome, Opera, Safari    
  34.         if (window.XMLHttpRequest) {  
  35.             xhr = new XMLHttpRequest();  
  36.         }  
  37.             //对于 IE6, IE5    
  38.         else if (window.ActiveXObject) {  
  39.             xhr = new ActiveXObject("Microsoft.XMLHTTP");  
  40.         }  
  41.         else {  
  42.             //xhr = new ActiveXObject("Msxml2.XMLHTTP");  
  43.             $("#result").html("您的浏览器不支持XMLHttpRequest");  
  44.         }  
  45.         xhr.onreadystatechange = _CallBack;  
  46.         xhr.open("post", "/Search.aspx?q=" + str, true);  
  47.         xhr.send();  
  48.     }  
  49.     function _CallBack() {  
  50.         if (xhr.readyState == 4 && xhr.status == 200) {  
  51.             $("#result").html(xhr.responseText);  
  52.         }  
  53.     }  
  54. </script>  


//search.aspx.cs

  1. using System;  
  2.   
  3. namespace MyAjax  
  4. {  
  5.     public partial class Search : System.Web.UI.Page  
  6.     {  
  7.         protected override void OnPreInit(EventArgs e)  
  8.         {  
  9.             if (!IsPostBack)  
  10.             {  
  11.                 if (Request.QueryString["q"] != null)  
  12.                 {  
  13.                     string str = Request.QueryString["q"].ToString().Trim();  
  14.                     //清空输出  
  15.                     Response.Clear();  
  16.                     //设置页面无缓存  
  17.                     Response.Buffer = true;  
  18.                     Response.ExpiresAbsolute = System.DateTime.Now.AddSeconds(-1);  
  19.                     Response.Expires = 0;  
  20.                     Response.CacheControl = "no-cache";  
  21.                     Response.AppendHeader("Pragma", "No-Cache");  
  22.                     Response.Cache.SetNoStore();  
  23.                     Response.ClearContent();  
  24.                     //输出  
  25.                     Response.Write("您是不是要找：<br />" + str);  
  26.                     //结束输出  
  27.                     Response.End();  
  28.                 }  
  29.             }  
  30.         }  
  31.     }  
  32. }  



//方法

abort()

取消当前响应，关闭连接并且结束任何未决的网络活动。

这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。


getAllResponseHeaders()

把 HTTP 响应头部作为未解析的字符串返回。

如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 "" 隔开。


getResponseHeader()

返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。

该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。


open()

//open(method, url, async, username, password)

初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。


send()

发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。


setRequestHeader()

向一个打开但未发送的请求设置或添加一个 HTTP 请求。

//属性

状态
名称
描述
0
Uninitialized
初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1
Open
open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2
Send
Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3
Receiving
所有响应头部都已经接收到。响应体开始接收但未完成。
4
Loaded
HTTP 响应已经完全接收。
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/web100/p/ajax-javascript-XMLHttpRequest.html