Ajax学习

为什么要有Ajax？

有时候，我们需要在当前的页面中显示其他请求的内容，但又不需要其他的请求重发一次，例如搜索框中输入一些关键字出现提示的相关热词，此时我们仅仅只需要单独的搜索框显示请求数据，而页面其他内容保持不变，不需要重发请求进行整体页面刷新因而需要这门技术。概括的讲就是局部请求、局部展示。

Ajax的概念

Ajax是JavaScript、XML、CSS、DOM等多种技术的组合，是一种局部刷新技术，是存在于浏览器端的技术。

Ajax的作用

实现在当前结果页中显示其他请求的响应内容。（局部请求，局部展示）

Ajax的使用
ajax的基本流程

<script type="text/javascript">
	function getData(){		
		//创建ajax引擎对象
			var ajax;
			if(window.XMLHttpRequest){//非ie
				ajax=new XMLHttpRequest();
			}else if(window.ActiveXObject){//ie
				ajax=new ActiveXObject("Msxml2.XMLHTTP");
			}
		
			//复写onreadystatement函数
			ajax.onreadystatechange=function(){
				//判断Ajax状态码
				if(ajax.readyState==4){
					//判断响应状态码
					if(ajax.status==200){
						//获取响应内容
						var result=ajax.responseText;
						//处理响应内容
							//获取元素对象
							var showdiv=document.getElementById("showdiv");
							showdiv.innerHTML=result;
					}else if(ajax.status==404){
						//获取元素对象
						var showdiv=document.getElementById("showdiv");
						showdiv.innerHTML="请求资源不存在";
					}else if(ajax.status==500){
						//获取元素对象
						var showdiv=document.getElementById("showdiv");
						showdiv.innerHTML="服务器繁忙";
					}
				}else{
					//获取元素对象
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML="<img src='img/2.gif' width='200px' height='100px'/>";
				}
			}
		//发送请求
		ajax.open("get","ajax",true);
		ajax.send(null);
		alert("哈哈");
	}
</script>

状态码
ajax状态码：
属性：readyState：0,1,2,3,4
4: 表示响应内容被成功接收

响应状态码:
属性：status
200:表示一切OK
404:资源未找到
500：内部服务器错误

获取响应内容

获取普通字符串：

var result = ajax.responseText;

获取json(重点)：

var result = ajax.responseText;//获取json响应数据
eval("var u"+result);//把对象名u和json数据拼好，执行eval；
u.属性名//使用获取的json对象中的数据

其实就是将数据按照json的格式拼接好的字符串，方便使用eval方法将接受的字符串数据直接转换为js的对象
json格式：
var 对象名={
属性名:属性值,
属性名:属性值,
……
}

获取XML数据：

var result = ajax.responseXML;//返回document对象

通过document对象将数据从xml中获取出来

发送请求
get请求

ajax.open("get","url？name=张三&pwd=123");
ajax.send(null);

get的请求实体拼接在URL后面，用？隔开键值对。

post请求

ajax.open("post", "url");
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置为键值对的形式发送数据而不是字符串
ajax.send("name=张三&pwd=123");//有单独的请求实体

ajax的异步和同步

ajax.open(method,urL,async);

async：设置同步代码执行还是异步代码执行，true代表异步，默认是异步，false代表同步。