JavaScript AJAX

 

  • AJAX

     AJAX即“Asynchronous JavaScript and
XML”(异步JavaScript和XML),是因同一种创建交互式网页应用的网页开发技术,Ajax的核心是JavaScript对象XmlHttpRequest,这只要您可行使JavaScript向服务器提出请求并处理应,而非封堵用户。

<html>
<head>
<script type="text/javascript">
    function loadXMLDoc()
    {
        …. AJAX script goes here …
    }
</script>
</head>
<body>
<div id="myDiv"><h3>Let AJAX change this text</h3></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>

 

优点

  • 减少网络上数据量的导
  • 改良用户体验

 

实现方式

纯JavaScript

  • *  *

  • 使用灵活但麻烦调试

其三正技术

微软AJAX控件库

  • 善调试,操作简捷,但缺少灵活性

 

重要步骤

  • 实例化XmlHttpRequest对象
  • 向阳服务器发送动态请求
  • 服务器执行措施处理客户端的呼吁
  • 接过服务端响应实施客户端响应的方法

 

  • XMLHttpRequest对象

    所有现代浏览器都支持 XMLHttpRequest
对象(IE5 和 IE6 使用 ActiveXObject)。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)
  {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
  }
else
  {
      // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

 

  • 于服务器发送请求

    如要用呼吁发送到服务器,我们采取
XMLHttpRequest 对象的 open() 和 send() 方法。

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
    • open(method,url,async) 规定请求的种、URL
      以及是否异步处理要。

      • method:请求的型;GET 或
        POST
      • url:文件于服务器上的岗位
      • async:true(异步)或
        false(同步)
    • send(string) 将请求发送到服务器。
      • string:仅用于 POST
        请求

 

  • GET和POST

    与 POST 相比,GET
更简便易行吗再次快,并且于大部分情形下还能够为此。然而,在偏下情况屡遭,请以 POST
请求:

    • 束手无策以缓存文件(更新服务器上之公文要数据库)
    • 于服务器发送大量数(POST
      没有数据量限制)
    • 出殡包含无掌握字符的用户输入时,POST 比
      GET 更稳定为重保险

    GET 请求

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

    POST 请求

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

 

  • 异步

    AJAX 指的凡异步 JavaScript 和
XML(Asynchronous JavaScript and XML)。XMLHttpRequest 对象要假定用于
AJAX 的语句,其 open() 方法的 async 参数必须装为 true。

xmlhttp.open("GET","ajax_test.asp",true);

    对于 web
开发人员来说,发送异步请求是一个壮烈的进步。很多在服务器执行之职责都一定棘手。AJAX
出现之前,这也许会见引起应用程序挂于要停。

    通过 AJAX,JavaScript
无需待服务器的响应,而是于伺机服务器响应时实施另外脚本和当响应就绪后对响应进行拍卖。

 

  • 服务器响应

    如得取得来自服务器的应,请用
XMLHttpRequest 对象的 responseText 或 responseXML 属性。

    • responseText
      获得字符串形式的应数据。 

    如果来服务器的响应并非 XML,请用
responseText 属性。responseText
属性返回字符串形式之响应,因此若可这样用。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    • responseXML 获得 XML
      形式之应数据。 

    如果来服务器的应是
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;

 

  • onreadystatechange 事件

    当请求被发送至服务器时,我们要履行有因响应的职责。每当
readyState 改变时,就会见触发 onreadystatechange 事件。readyState 属性存来
XMLHttpRequest 的状态信息。

    • onreadystatechange 

    存储函数(或函数称),每当 readyState
属性改变时,就会见调用该函数。 

    • readyState 

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

      • 0Ajax: 请求未初始化
      • 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;
    }
  }

 

  • 使用 Callback 函数

    callback
函数是同样种为参数形式传递让其他一个函数的函数。如果您的网站上有多个 AJAX
任务,那么你该为创建 XMLHttpRequest 对象编排一个正经的函数,并为每个
AJAX 任务调用该函数。该函数调用应该包含 URL 以及来 onreadystatechange
事件时实行的天职(每次调用可能不尽相同)。

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

相关文章