day64—ajax技术学习笔记

转行学开发，代码100天——2018-05-19

Ajax技术学习笔记

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

AJAX应用：

• 运用XHTML+CSS来表达资讯；
• 运用JavaScript操作DOM（Document Object Model）来执行动态效果；
• 运用XML和XSLT操作资料;
• 运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换；
• 注意：AJAX与Flash、Silverlight和Java Applet等RIA技术是有区分的。

AJAX实现原理：

Ajax使用步骤：

1>     创建ajax对象

var xmlhttp;

if (window.XMLHttpRequest) {

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp=new XMLHttpRequest();

} else {

// IE6, IE5 浏览器执行代码

 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

 }

2>     打开文件

xmlhttp.open("GET","ajax_info.txt?t="+new Date().getTime(),true);
open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

3>     发送请求

Get方法：

xmlhttp.send();

post 方法:

xmlhttp.send(string);

例1：

xmlhttp.open("POST","/try/ajax/demo_post.php",true);

xmlhttp.send();

例2：

xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");

4>     异步请求响应

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

 xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);

xmlhttp.send();

服务器响应有两种：

responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

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 事件

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

xmlhttp.onreadystatechange=function()

 {

if(xmlhttp.readyState==4 && xmlhttp.status==200)

{

 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

Xml文件解析：

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;

}