XMLHttpRequest

概念介绍

• 运用HTML和CSS来实现页面，表达信息
• 运用XMLHttpRequest和web服务器进行数据的异步交换
• 运用JavaScript操作DOM，实现动态局部刷新

XMLHttpRequest对象

var requset = new XMLHttpRequest();

var request;
if(window.XMLHttpRequest){
    request = new XMLHttpRequest();  //IE7+,Firefox,chrome,opera,safari..
}else{
    request = new ActiveXObject("Microsoft.XMLHTTP");//IE5,IE6
}

HTTP请求

一个完整的HTTP请求过程，通常有下面7个步骤：

1. 建立TCP链接
2. web浏览器向web服务器发送请求命令
3. web浏览器发送请求头信息
4. web服务器应答
5. web服务器发送应答头信息
6. web服务器向浏览器发送数据
7. web服务器关闭TCP链接

一个HTTP请求一般由四部分组成：

• HTTP请求的方法或动作，比如是GET还是POST请求
• 正在请求的URL，总得知道请求的地址是什么
• 请求头，包含一些客户端环境信息，身份验证信息等
• 请求体，即请求正文，可以包含客户提交的查询字符串信息，表单信息等
  
  HTTP请求：
• GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量有限制，一般在2000个字符
• POST：一般用于修改服务器上的资源，对所发送信息的数量无限制

一个HTTP响应一般由三部分组成：

• 一个数字和文字组成的状态码，用来显示请求是成功还是失败

• 响应头，和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等

• 响应体，也就是相应正文
  
  HTTP状态码由3位数字构成，其中首位数字定义了状态码的类型：

• 1xx：信息类，表示收到web浏览器请求，正在进一步处理中

• 2xx：成功，表示用户请求被正确接受，理解和和处理，如200 OK

• 3xx：重定向，表示请求没有成功，客户必须采取进一步的动作

• 4xx：客户端错误，表示客户端提交的请求有错误，如：404 NOT Found，意味着请求中所引用的文档不存在

• 5xx：服务器错误，表示服务器不能完成对请求的处理，如：500

XMLHttpRequest发送请求

• open(method,url,async)
• method：发送和请求方法
• url：请求地址
• async：请求同步/异步
• send(string)

var requset = new XMLHttpRequest();

request.open("GET","get.php",true);
request.send();

request.open("POST","post.php",true);
request.send();

request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=王二狗&set=男");

XMLHttpRequest取得响应：

• responseText：获取字符串形式的 响应数据
• responseXML：获得XML形式的 响应数据
• status和statusText：以数字和文本形式返回HTTP状态码
• getAllResponseHeader()：获取所有的响应报头
• getResponseHeader()：查询响应中的某个字段的值
• readyState属性：
  • 0：请求未初始化，open还没有调用
  • 1：服务器链接已建立，open已经调用了
  • 2：请求已接受，也就是接收到头信息了
  • 3：请求处理中，也就是接收到响应主体了
  • 4：请求已完成，且响应已就绪，也就是响应完成了

var requset = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange = function(){
    if(request.readyState === 4 && request.status === 200){
        //做一些事情 request.responseText
    }
}

例子

• 纯html页面，用来实现员工查询和新建的页面

• php页面，用来实现查询员工和新建员工的后台接口
  

  1. 运行PHP
  2. XAMMP数据库下载,https://www.apachefriends.org/download.html
  3. 在编辑器中配置web服务器用于本地测试

配置 apache：
端口改为8080
php页面就不多做介绍了，下面看ajax请求：

document.getElementById("save").onclick = function(){
	//发送Ajax查询请求并处理
	var request = new XMLHttpRequest();
	request.open("POST","service.php");
	var data = "name=" + document.getElementById("saffName").value + "&number=" + document.getElementById("saffNumber").value 
	+ "&sex=" + document.getElementById("saffSex").value + "&job=" + document.getElementById("saffJob").value;
	request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	request.send(data);
	request.onreadystatechange = function(){
    	if(request.readyState === 4){
    		if(request.status === 200){
    			document.getElementById("createResult").innerHTML = request.responseText;
    		}else{
    			alert("发生错误：" + request.status);
    		
    	}
	}
}

用iQuery实现Ajax

JQuery.ajax([setings])

• type：类型，“POST"或"GET”，默认为"GET"
• url：发送请求的地址
• data：是一个对象，连同请求发送到服务器的数据
• dataType：预期服务器返回的数据类型，如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为"json"
• success：是一个方法，请求成功后的回调函数，传入返回后的数据，以及包含成功代码的字符串
• error：是一个方法，请求失败时调用此函数，传入XMLHttpRequest对象

$("#save").click(function(){
	$.ajax({
		type:"POST",
		url:"service.php",
		dataType:"json",
		data:{
			name:$("#saffName").val(),
			number:$("#saffNumber").val(),
			sex:$("#saffSet").val(),
			job:$("#saffJob").val(),
		},
		success:function(data){
			if(data.success){
				$("#searchResult").html(data.msg);
			}else{
				$("#searchResult").html("出现错误" + data.msg);
			}
		}
	})
})