AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

　　AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。　　

　　AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

　　AJAX 的工作原理如下图所示：

　　AJAX是基于现有的Internet标准，并且联合使用它们：

  • XMLHttpRequest 对象 (异步的与服务器交换数据)
  • JavaScript/DOM (信息显示/交互)
  • CSS (给数据定义样式)
  • XML (作为转换数据的格式)　　

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

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

　　为了应对所有的现代浏览器，包括 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");

 }

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

xmlhttp.open("GET","ajax_info.jsp",true);

xmlhttp.send();　
方法 描述
open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）
send(string)

将请求发送到服务器。

  • string：仅用于 POST 请求

　　我们不推荐使用 async=false。JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。　　

　　与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

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

　　在使用GET 方式时，为了避免缓存的情况，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","/try/ajax/demo_get.jsp?t=" + Math.random(),true);

xmlhttp.send();

　　如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

 xmlhttp.open("POST","/try/ajax/demo_post2.jsp",true);

 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

 xmlhttp.send("fname=Henry&lname=Ford");　　
方法 描述
setRequestHeader(header,value)

向请求添加 HTTP 头。

  • header: 规定头的名称
  • value: 规定头的值

　　如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

　　如果来自服务器的响应并非 XML，请使用 responseText 属性。

　　如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性。

 xmlDoc=xmlhttp.responseXML;

 txt="";

 x=xmlDoc.getElementsByTagName("ARTIST");

 for (i=0;i<x.length;i++)

 {

     txt=txt + x[i].childNodes[0].nodeValue + "<br>";

 }

 document.getElementById("myDiv").innerHTML=txt;

　　当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性：

属性 描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪
status 200: "OK"
404: 未找到页面

　　在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()

{

    if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    }

}

　　回调函数是一种以参数形式传递给另一个函数的函数。如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

function myFunction()

{

    loadXMLDoc("/try/ajax/ajax_info.txt",function()

    {

        if (xmlhttp.readyState==4 && xmlhttp.status==200)

        {

            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

        }

    });

}

　　示例1（创建一个简单的XMLHttpRequest，从一个XML文件中返回数据）：

 <html><!DOCTYPE html>

 <html>

 <head>

 <script>

 function loadXMLDoc(url)

 {

 var xmlhttp;

 if (window.XMLHttpRequest)

   {// code for IE7+, Firefox, Chrome, Opera, Safari

   xmlhttp=new XMLHttpRequest();

   }

 else

   {// code for IE6, IE5

   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

   }

 xmlhttp.onreadystatechange=function()

   {

   if (xmlhttp.readyState==4 && xmlhttp.status==200)

     {

     document.getElementById('A1').innerHTML=xmlhttp.status;

     document.getElementById('A2').innerHTML=xmlhttp.statusText;

     document.getElementById('A3').innerHTML=xmlhttp.responseText;

     }

   }

 xmlhttp.open("GET",url,true);

 xmlhttp.send();

 }

 </script>

 </head>

 <body>

 <h2>Retrieve data from XML file</h2>

 <p><b>Status:</b><span id="A1"></span></p>

 <p><b>Status text:</b><span id="A2"></span></p>

 <p><b>Response:</b><span id="A3"></span></p>

 <button onclick="loadXMLDoc('note.xml')">Get XML data</button>

 </body>

 </html>

　　示例2（检索资源（文件）的头信息）：

 <html><!DOCTYPE html>

 <html>

 <head>

 <script>

 function loadXMLDoc(url)

 {

 var xmlhttp;

 if (window.XMLHttpRequest)

   {// code for IE7+, Firefox, Chrome, Opera, Safari

   xmlhttp=new XMLHttpRequest();

   }

 else

   {// code for IE6, IE5

   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

   }

 xmlhttp.onreadystatechange=function()

   {

   if (xmlhttp.readyState==4 && xmlhttp.status==200)

     {

     document.getElementById('p1').innerHTML=xmlhttp.getAllResponseHeaders();

     }

   }

 xmlhttp.open("GET",url,true);

 xmlhttp.send();

 }

 </script>

 </head>

 <body>

 <p id="p1">The getAllResponseHeaders() function returns the header information of a resource, like length, server-type, content-type, last-modified, etc.</p>

 <button onclick="loadXMLDoc('/try/ajax/ajax_info.txt')">Get header information</button>

 </body>

 </html>

　　示例3（创建一个XMLHttpRequest从XML文件中检索数据并显示在一个HTML表格中）：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <style>

 table,th,td {

   border : 1px solid black;

   border-collapse: collapse;

 }

 th,td {

   padding: 5px;

 }

 </style>

 </head>

 <body>

 <h1>XMLHttpRequest 对象</h1>

 <button type="button" onclick="loadDoc()">获取我收藏的 CD</button>

 <br><br>

 <table id="demo"></table>

 <script>

 function loadDoc() {

   var xhttp = new XMLHttpRequest();

   xhttp.onreadystatechange = function() {

     if (this.readyState == 4 && this.status == 200) {

       myFunction(this);

     }

   };

   xhttp.open("GET", "cd_catalog.xml", true);

   xhttp.send();

 }

 function myFunction(xml) {

   var i;

   var xmlDoc = xml.responseXML;

   var table="<tr><th>Artist</th><th>Title</th></tr>";

   var x = xmlDoc.getElementsByTagName("CD");

   for (i = 0; i <x.length; i++) {

     table += "<tr><td>" +

     x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +

     "</td><td>" +

     x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +

     "</td></tr>";

   }

   document.getElementById("demo").innerHTML = table;

 }

 </script>

 </body>

 </html>

　　示例4（用一个callback函数创建一个XMLHttpRequest，并从一个TXT文件中检索数据）：

 <!DOCTYPE html>

 <html>

 <head>

 <script>

 var xmlhttp;

 function loadXMLDoc(url,cfunc)

 {

 if (window.XMLHttpRequest)

   {// IE7+, Firefox, Chrome, Opera, Safari 代码

   xmlhttp=new XMLHttpRequest();

   }

 else

   {// IE6, IE5 代码

   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

   }

 xmlhttp.onreadystatechange=cfunc;

 xmlhttp.open("GET",url,true);

 xmlhttp.send();

 }

 function myFunction()

 {

     loadXMLDoc("/try/ajax/ajax_info.txt",function()

     {

         if (xmlhttp.readyState==4 && xmlhttp.status==200)

         {

             document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

         }

     });

 }

 </script>

 </head>

 <body>

 <div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>

 <button type="button" onclick="myFunction()">修改内容</button>

 </body>

 </html> 

ajax之深入解析（1）的更多相关文章

  1. ajax返回数据解析总结

    ajax即异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示 ...

  2. ajax的原理解析

    一.关于同步与异步的分析: 异步传输是面向字符的传输,它的单位是字符:而同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的.而ajax就是采用的异步请求方式的. ...

  3. phpStudy4——前端页面使用Ajax请求并解析php返回的json数据

    项目需求: 在html页面显示所有用户列表信息. 需求分析: 1. html页面使用ajax向后端php请求用户数据 2. php脚本查询数据库,并将查询后的结果以json格式返回前端html页面 3 ...

  4. jQuery ajax 流程全解析

    实例解析java + jQuery + json工作过程(登录) 本文主要讲解在java环境下使用jQuery进行JSON数据传送的交互过程 参考根据作者的账务管理系统(个人版) 源码下载 讲解 一. ...

  5. ajax请求原理及jquery $.ajax封装全解析

    .ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...

  6. 转：jQuery Ajax 实例 全解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

  7. 【JavaScript】jQuery Ajax 实例 全解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

  8. jQuery Ajax 实例 全解析

     jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是 ...

  9. jquery ajax获取和解析数据

    最近项目中用到了ajax技术,之前虽然写过一点点,但是没有系统的总结过.趁着刚刚用过,手热就记录一下,方便以后查阅. $.ajax中的参数 $.ajax的函数格式: $.ajax({ type: 'P ...

随机推荐

  1. 【题解】Atcoder ARC#76 F-Exhausted?

    第一次用霍尔定理做题..简单的来说,就是判断一张二分图上是否存在完美匹配,只需要证明对于 \(a\) 集合中的任意 \(k\) 个点来说,都与 \(b\) 集合中的 \(k\) 个点有边相连.如果不满 ...

  2. [洛谷P5107]能量采集

    题目大意:有一张$n(n\leqslant50)$个点$m(m\leqslant n(n-1))$条边的有向图,每个点还有一个自环,每个点有一个权值.每一秒钟,每个点的权值会等分成出边个数,流向出边. ...

  3. HDOJ(HDU).2266 How Many Equations Can You Find (DFS)

    HDOJ(HDU).2266 How Many Equations Can You Find (DFS) [从零开始DFS(9)] 点我挑战题目 从零开始DFS HDOJ.1342 Lotto [从零 ...

  4. Codeforces 854C Planning（贪心+堆）

    贪心:让代价大的尽量移到靠前的位置. 做法:先让前k个数加进堆里,枚举k+1~n+k,每次把新元素加进堆后找到最大代价放在当前位置即可. #include<bits/stdc++.h> # ...

  5. POJ3177:Redundant Paths（并查集+桥）

    Redundant Paths Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 19316   Accepted: 8003 ...

  6. [nginx]nginx rewrite规则之last和break

    c俺靠这篇博文 http://eyesmore.iteye.com/blog/1142162 有用的配置: 1.开启rewrite_log,这样在/var/log/nginx/error.log中显示 ...

  7. C# 中的委托和事件(详解)

    C# 中的委托和事件 委托和事件在 .NET Framework 中的应用非常广泛,然而,较好地理解委托和事件对很多接触 C# 时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太 ...

  8. linux查看文件相关指令

    以下内容整理自以下两篇文章: http://www.cnblogs.com/xilifeng/archive/2012/10/13/2722596.html Linux 查看文件内容的命令 http: ...

  9. UVALive-3263 That Nice Euler Circuit （几何欧拉定理）

    https://vjudge.net/problem/UVALive-3263 平面上有一个n个端点的一笔画,第n个端点总是和第一个端点重合,因此图示一条闭合曲线. 组成一笔画的线段可以相交,但不会部 ...

  10. C11性能之道：右值引用

    1.左值与右值 C++11中新增了一种类型,右值引用,标记为T &&. 首先来介绍什么是左值和右值,左值是指表达式结束后依旧存在的持久对象,而右值是指表达式结束之后就不再存在的临时对象 ...