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
无需等候服务器的响应,而是在等候服务器响应时举行其余脚本和当响应就绪后对响应举办拍卖。

 

  • 服务器响应

Ajax,    如需获得来自服务器的响应,请使用
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
发生变化。

      • 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;
    }
  }

 

  • 使用 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;
    }
  });
}

相关文章