【基础-4】AJAX基础整理

一、简介

============================================================================
1、异步的Javascript和XML，用于创建快速动态网页的技术

2、最大优点
不重新加载整个页面更新部分网页内容

3、工作原理
Browser-(internet)-Server-(internet)-Browser

4、是基于现有的internet标准
XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

5、AJAX应用程序与浏览器和平台无关的

2、详细讲解

============================================================================

1、XML创建对象

所有现代浏览器均支持XMLHttpRequest对象，用于在后台与服务器交换数据

创建语法：
var iable = new XMLHttpRequest()
老版本IE使用ActiveX对象：
var iable = new ActiveXObject('Microsoft.XMLHTTP')

2、XML请求

1.两个方法

xmlhttp.open(
	'GET', // method，请求类型 'GET'、'POST'
	'ajax_info.txt', // url，请求文件
	true //async，是否异步，true、false
);
xmlhttp.send(); //将请求发送到服务器，string参数仅用于POST请求

2其他语法
需要使用POST的情况
1.无法使用缓存文件
2.向服务器发送大量数据
3.发送包含未知字符的用户输入，POST比GET更稳定课可靠

向请求添加http头
header：规定头的名称
value：规定头的值

3.GET请求示例

xmlhttp.open('GET','/try/ajax/demo_get2.php?fname=Henry&lname=Ford',true);
xmlhttp.send();

4.POST请求示例：表单

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

5.当async=true时，请规定响应处于onreadystatechange事件中的就绪状态时执行的函数

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();

3、XML响应

如需要来自服务器的响应，请使用XMLHttpRequest对象的属性
responseText：字符串形式数据，示例

document.getElementById('myDiv').innerHTML = xmlhttp.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;

4、XML readyState

readyState改变时，onreadystatechange事件，readyState属性存在XMLHttpRequest的状态信息
XMLHttpRequest对象的重要属性
1.onreadystatechange：存储函数，每当readyState属性改变时，就会调用该函数

2.readyState：存有XMLHttpRequest的状态，从0~4发生变化
0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪

3.status
200：‘OK’
400未找到页面

1xx:信息响应类，表示接收到请求并且继续处理
2xx:处理成功响应类，表示动作被成功接收、理解和接受
3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理
4xx:客户端错误，客户请求包含语法错误或者是不能正确执行
5xx:服务端错误，服务器不能正确执行一个正确的请求
回调函数是一种以参数形式传递给另一个函数的函数

5、ajajx实例

function loadXMLDoc(){
	// XML创建对象
	var xmlhttp;
	if (window.XMLHttpRequest) {
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp = new XMLHttpRequest();
	} else {
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

	// 异步处理，onreadystatechange 事件中的就绪状态
	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();
}

6、AJAX ASP/PHP实例：showHint()函数

function showHint(str) {
	var xmlhttp;
	if (str.length==0){
		document.getElementById('txtHint').innerHTML='';
		return;
	}

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

	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.sttaus == 200) {
			document.getElementById('txtHint').innerHTML = xmlhttp.responseText;
		}
	}

	xmlhttp.open('GET','/try/ajax/gethint.php?q='+str,true);
	xmlhttp.send();
}

7、AJAX 数据库实例：showCustomer()函数

function showCustomer(str) {
	var xmlhttp;
	if (str == "") {
		document.getElementById("txtHint").innerHTML="";
		RETURN;
	}

	if (window.XMLHttpRequest){
		// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp = new XMLHttpRequest();
	} else {
		// IE6, IE5 浏览器执行代码
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
  xmlhttp.send();
}

8、AJAX XML：ajax与xml文件进行交互式通信，实例解析：loadXMLDoc()函数，异步加载xml文档

function loadXMLDoc() {
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
		if (this.readyState  == 4 && this.state == 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;
}

三、JQuery Ajax

============================================================================

1.语法：$.ajax({name:value,…})

2.可选参数值

async：是否异步，默认true
beforeSend(xhr) ：发送请求前运行的函数
complete(xhr,status)：请求完成时运行的函数
data：规定要发送到服务器的数据
dataType：预期的服务器响应的数据类型
timeout：设置本地的请求超时时间（以毫秒计）
type：规定请求的类型（GET 或 POST）
url：规定发送请求的 URL默认是当前页面
cache：是否缓存被请求页面，默认是true
success(result,status,xhr)：当请求成功时运行的函数
error(xhr,status,error)：如果请求失败要运行的函数

3.load()：从服务器加载数据，并把返回的数据放入被选元素中

$(selector).load(URL,data,callback)

4.get()：从指定的资源请求数据

$.get(URL,callback);

5.post()：向指定的资源提交要处理的数据

$.post(URL,data,callback);

6.封装通用的jquery ajax请求思路

$.ajax({
	url: url, //请求地址
	type: type, //请求类型：GET、POST
	dataType: dataType, //接收数据类型：json
	data: data, //请求的参数
	async: true, //是否异步
	cache:false, //浏览器是否缓存
	timeout:2000, //请求超时，毫秒
	beforeSend:function() {},//发送请求前运行的函数
	complete:function(xhr,status) {}, //请求完成时运行的函数
	success:function() {}, //请求成功后执行的函数
	error:function() {} //请求成功后执行的函数
})