11 | 落叶无痕

自动摘要: 1.AJAX=AsynchronousJavaScriptandXML（异步的JavaScript和XML） 2.AJAX是一种使用现有标准的新方法 3.AJAX：在不重新加载整个页面 ……..

AJAX = Asynchronous JavaScript and XML（异步的JavaScript和XML）
AJAX是一种使用现有标准的新方法
AJAX：在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容
AJAX-创建XMLHttpRequest对象
1. XMLHttpRequest用于在后台与服务器交换数据
2. 语法： variable = new XMLHttpRequest();
variable = new ActiveXObject(“Microsoft.XMLHTTP”)(IE6,IE5)

var variable;
if(window.XMLHttpRequest){
  //IE7+,Firefox,Chrome,Opera,Safari 浏览器执行代码
	variable = new XMLHttpRequest();
}
else{
  //IE6,IE5 浏览器执行代码
  variable = new ActiveXObject("Microsoft.XMLHTTP")
}

AJAX-向服务器发送请求

将请求发送到服务器，使用XMLHttpRequest对象的open()和send()方法

方法	描述
open(method,url,async);	规定请求的类型、URL以及是否异步处理请求- method：请求的类型：GET或POST- url：文件在服务器上的位置- async：true（异步）或false（同步）
send	- string：仅用于POST请求

请求类型GET还是POST？
1. 一般情况下使用GET，GET更简单更快，在大部分情况下都能用
2. 以下情况使用POST
  1. 不愿使用缓存文件（更新服务器上的文件或数据库）
  2. 向服务器发送大量数据（POST没有数据量限制）
  3. 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
3. GET请求
  1. 避免得到的是缓存结果，可以向URL添加一个唯一的ID，URL：”/try/ajax/demo_get.php?t=” + Math.random()
  2. 通过GET方法发送信息，可以向URL添加信息

URL：”/try/ajax/demo_get.php?fname=Herry&lname=Ford”

  4. POST
     1. 如果需要像HTML表单那样POST数据，使用setRequestHeader()添加HTTP头，然后再send()方法中规定希望发送的数据
     2. setRequestHeader(header,value);向请求添加HTTP头，header---规定头的名称，value---规定头的值
  5. 异步-True或False？
     1. XMLHttpRequest对象如果要用于AJAX的话，open()方法中的async参数必须设置为true
     2. Async=true时，规定在响应处于onreadystatechange事件中的就绪状态时执行的函数
     3. Async=false时，不要编写onreadystatechange函数，直接在send()语句后面编写代码即可。

AJAX-服务器响应
1. 获取服务器的响应，使用XMLHttpRequest对象的responseText或responseXML。responseText—获得字符串形式的响应数据；responseXML—获得XML形式的响应数据

AJAX-onreadystatechange事件

当readyState改变时，就会触发onreadystatechange事件

XMLHttpRequest对象的三个重要属性

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

注意： onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。

使用回调函数，回调函数时一种以参数形式传递给另一个函数的函数。如果网站上存在多个AJAX任务，那么应该为XMLHttpRequest对象创建编写一个标准的函数，并为每个AJAX任务调用该函数。
AJAX ASP/PHP实例
1. 用户在输入框中键入字符时，网页与web服务器进行通信，显示提示信息

<body>
<p><b>在输入框中尝试输入字母a：</b></p>
<form action="">
	输入名字：<input type="text" onkeyup="showHint(this.value)">
</form>
<p>提示信息：<span id="output"></span></p>

<script>
	function showHint(str){
		var xmlHttp;
    // 如果输入框为空，则函数清空output占位符的内容，并退出函数
    if(str.length==0){
      document.getElementById("output").innerHTML="";
      return;
    }
    // 输入框不为空，创建XMLHttpRequest对象
		if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}
		else {
			xmlHttp = new ActiveXObject("Microsoft.XMLHttp")
		}
    // 当服务器响应就绪时执行函数
		xmlHttp.onreadystatechange = function (){
			if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
				document.getElementById("output").innerHTML = xmlHttp.responseText;
			}
		}
    // 把请求发送到服务器上的文件
		xmlHttp.open("GET","/try/ajax/gethint.php?q="+str,true);
		xmlHttp.send();
	}
</script>
</body>

用AJAX从XML文件返回数据实例
1. 用户点击“获取我收藏的CD”按钮，显示内容；

<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>


<button type="button" onclick="loadXMLDoc()">获取我收藏的CD</button>
<table id="output"></table>
<script>
	function loadXMLDoc() {
		var xmlHttp;
    // 创建XMLHttpRequest对象
		if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}
		else {
			xmlHttp = new ActiveXObject("Microsoft.XMLHttp")
		}
    // 当服务器响应就绪时执行函数
		xmlHttp.onreadystatechange = function (){
			if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
				myFunction(this);
			}
		}
		xmlHttp.open("GET","cd_catalog.xml",true);
		xmlHttp.send();
	}
	function myFunction(xml){
		var i;
    // 获取服务器的响应，responseXML--获得XML形式的响应数据
		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("output").innerHTML = table;
	}
</script>

AJAX JSON实例

<button  type="button" onclick="loadXMLDoc()">获取课程数据</button>
<div id="output"></div>
<script>
	function loadXMLDoc() {
		var xmlHttp;
		if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}
		else {
			xmlHttp = new ActiveXObject("Microsoft.XMLHttp")
		}
		xmlHttp.onreadystatechange = function (){
			if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
				var myArr = JSON.parse(this.responseText);
				myFunction(myArr)
			}
		}
		xmlHttp.open("GET","/try/ajax/json_ajax.json",true);
		//xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xmlHttp.send();
	}
	function myFunction(arr){
		var out = ""
		for(var i = 0;i<arr.length;i++){
			out += "<a href=' " +
					arr[i].url + "'>" + arr[i].title + '</a><br>'
		}
		document.getElementById("output").innerHTML = out;
	}
</script>

setRequestHeader
是设置 HTTP 请求头部的方法。此方法必须在 open() 方法和 send() 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。