• 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) 规定请求的种类、URubiconL
      以及是或不是异步处理请求。

      • 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
产生变化。

      • 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 职分调用该函数。该函数调用应该包罗 U卡宴L 以及发生 onreadystatechange
事件时实施的职分(每回调用恐怕不尽一致)。

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

相关文章

网站地图xml地图