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. [洛谷P2408]不同子串个数

    题目大意:给你一个字符串,求其中本质不同的字串的个数 题解:同[洛谷P4070][SDOI2016]生成魔咒,只要最后再输出就行了 卡点:无 C++ Code: #include <cstdio ...

  2. HDU3652：B-number——题解

    http://acm.hdu.edu.cn/showproblem.php?pid=3652 题目大意:给一个数n,求1-n所有满足下列条件的数的个数: 1.包含一个子串为“13” 2.能被13整除. ...

  3. 笔记-树形dp

    this is not a 正经的note you may not understand Problem 1:二叉树,有权,要选它父亲才能选它,$n\leq200,m\leq500$ I: $dp_{ ...

  4. Linux之SSL安全套接字20160704

    使用SSL前,先有 基本的TCP套接字连接.见demo代码 SSL_library_init();//在使用OpenSSL 之前,必须进行相应的协议初始化工作 OpenSSL_add_all_algo ...

  5. idea导入web项目tomcat

    概述 主要分为项目配置和tomcat配置两大步骤. 一.项目配置 打开idea,选择导入项 选择将要打开的项目路径后,继续选择项目的原本类型(后续引导设置会根据原本的项目类型更新成idea的项目),此 ...

  6. ContextLoaderListener和Spring MVC中的DispatcherServlet加载内容的区别【转】

    原文地址:https://blog.csdn.net/py_xin/article/details/52052627 ContextLoaderListener和DispatcherServlet都会 ...

  7. 使用py-faster-rcnn训练VOC2007数据集时遇到问题

    使用py-faster-rcnn训练VOC2007数据集时遇到如下问题: 1. KeyError: 'chair' File "/home/sai/py-faster-rcnn/tools/ ...

  8. mybatis分页查询需要注意的问题

    一般对mybatis的分页查询的关键代码就两行: #currentPage代表当前页,pageSize代表每页的行数 PageHelper.startPage(currentPage, pageSiz ...

  9. Android 悬浮窗口

    Android 悬浮窗口 一.创建悬浮窗口步骤    1.实现一个ViewGroup类,作为悬浮窗口的界面类,以便在里面重写onInterceptTouchEvent和onTouchEvent方法,实 ...

  10. HDU4027 线段树

    Can you answer these queries? Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65768/65768 K ...