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. CentOS 设置环境变量

    1. 查看环境变量,echo 命令用于在终端输出字符串或变量提取后的值,格式为“echo [字符串 | $变量]” echo $PATH /usr/local/bin:/usr/bin:/usr/lo ...

  2. 20165218 学习基础和C语言基础调查

    个人技能及阅读心得 个人技能之绘画 绘画是我从很小便开始接触的,从最初的简笔画到国画.素描.水粉,大约也学了七八年.但是到了高中之后,就逐渐放下了. 记得当初学素描时,老师的一句话让我记忆犹新,她说, ...

  3. 从零开始学Linux系统（一）之引导流程解析

    Linux系统:分时多用户多任务的操作系统: Linux系统引导流程: inittab配置文件中: 定义了linux系统的运行的7个级别:从0~6 0.6:分别代表关机和重启,不建议设置为默认的运行级 ...

  4. 删除空格-sed

    如下,我需要提取出‘wan’这个字符串.可以发现在‘wan’的前后是有空格,需要将其删除. # lxc list # lxc list | grep lxdbr0 | awk -F "|&q ...

  5. HDU2819：Swap（二分图匹配）

    Swap Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  6. Java的四种引用?用到的场景？

    在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象.也就是说,只有对象处于可触及(reachable)状态,程序才能使用它.从JDK 1.2版本开始,把对象的引用分 ...

  7. 打开cmd窗口新技巧get

    1.在当前目录下,按住shift键+点击右键,选择在此处打开命令窗口 很多时候我们需要打开命令行然后进入到相应目录进行一些操作. 常规的做法是: Win+R打开运行窗口 输入"cmd&quo ...

  8. php 获取周几

    date("l"); //date就可以获取英文的星期比如Sunday date("w"); //这个可以获取数字星期比如123,注意0是星期日 获取中文星期几 ...

  9. idea 多模块引用

    roma-server 引用common-utils的类,所以在roma-server 的pom中配置 <dependency> <groupId>org.springfram ...

  10. 解决华为手机用rem单位，内容超出屏幕宽度问题

    在H5手机页面上,用rem单位布局,配合js计算出一个根节点的font-size(原理是屏幕宽度乘以一个固定比例,如1/100),之后页面中所有的px全都换算成了rem单位来写,优点是能适配各种不同屏 ...