AJAX由浅入深

深碍√TFBOYSˉ_ 2021-12-09 00:25 265阅读 0赞

### AJAX由浅入深 ###

*  1. 什么是 AJAX ？
 *  2. 创建 XMLHttpRequest 对象
 *  3. 向服务器发送请求请求
 *  ajax请求的五个流程
 *  AJEX实例分析

# 1. 什么是 AJAX ？ #

**AJAX = 异步 JavaScript 和 XML。**

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

**AJAX 实例解析**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); xmlhttp.send(); } </script>
    </head>
    <body>
    
    <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
    <button type="button" onclick="loadXMLDoc()">修改内容</button>
    
    </body>
    </html>

上面的 AJAX 应用程序包含一个 div 和一个按钮。

div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
    <button type="button" onclick="loadXMLDoc()">修改内容</button>

接下来，在页面的 head 部分添加一个

<head>
    <script> function loadXMLDoc() { .... AJAX 脚本执行 ... } </script>
    </head>

# 2. 创建 XMLHttpRequest 对象 #

XMLHttpRequest 是 AJAX 的基础。

**XMLHttpRequest 对象**

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

**创建 XMLHttpRequest 对象**

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

> variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

> variable=new ActiveXObject(“Microsoft.XMLHTTP”);

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
    if (window.XMLHttpRequest)
    { 
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    { 
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

# 3. 向服务器发送请求请求 #

XMLHttpRequest 对象用于和服务器交换数据。

**向服务器发送请求**

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);
    xmlhttp.send();

<table> 
 <thead> 
  <tr> 
   <th align="center">方法</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">open(method,url,async)</td> 
   <td align="center">规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POST; url：文件在服务器上的位置;async：true（异步）或 false（同步）</td> 
  </tr> 
  <tr> 
   <td align="center">send(string)</td> 
   <td align="center">将请求发送到服务器。string 仅用于 POST 请求</td> 
  </tr> 
 </tbody> 
</table>

**GET 还是 POST？**

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

*  无法使用缓存文件（更新服务器上的文件或数据库）
 *  向服务器发送大量数据（POST 没有数据量限制）
 *  发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

# ajax请求的五个流程 #

1.建立xmlHttpRequest对象

if(window.XMLHttpRequest) { 
        xmlHttp = new XMLHttpRequest();
        if(xmlHttp.overrideMimeType) { 
         xmlHttp.overrideMimeType("text/xml");
        }
       } else if(window.ActiveXobject) { 
        var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
        for(var i = 0; i < activeName.length; i++) { 
         try { 
          xmlHttp = new ActiveXobject(activeName[i]);
          break;
         } catch(e) { }
        }
       }
       if(!xmlHttp) { 
        alert("创建xmlhttprequest对象失败");
       } else { }

2.设置回调函数

xmlHttp.onreadystatechange= callback;
    
       function callback(){ }

3.使用OPEN方法与服务器建立连接 xmlHttp.open(“get”,“ajax?name=”+ name,true)

此步注意设置http的请求方式（post/get）,如果是POST方式，注意设置请求头信息xmlHttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”)

4.向服务器端发送数据

xmlHttp.send(null);

如果是POST方式就不为空

5.在回调函数中针对不同的响应状态进行处理

if(xmlHttp.readyState == 4){        //判断交互是否成功
          if(xmlHttp.status == 200){          //获取服务器返回的数据 //获取纯文本数据
          var responseText =xmlHttp.responseText;
          document.getElementById("info").innerHTML = responseText;
          }
       }

# AJEX实例分析 #

get.htm页面HTML代码如下:

js代码如下:

新建Get.aspx页,Get.aspx.cs代码如下:

protected void Page_Load(object sender, EventArgs e)
    
    { 
    
    Response.Clear();
    
    string username = Request.QueryString["username"];
    
    string age = Request.QueryString["age"];
    
    Response.Write("姓名:'" + username + "'
    年龄:" + age + "
    时间:'" + DateTime.Now.ToString() + "'");
    
    Response.End();
    
    }