【AJAX】-基础认识

1. 什么是AJAX

AJAX是一种用于创建快速动态网页的技术，异步的JS 和 Xml，本质是使用 JS 提供的 XMLHttpRequest 对象 异步的向服务器发送请求，并接受响应数据（格式是 xml(默认)）在AJAX中，服务器响应回来的是部分的数据而不是完整的页面，也就是说响应的是我们所需要的数据，并且可以以无刷新的效果来更改页面中的局部内容，我们常说的异步；

2. 同步、异步

• 同步：在同一时间段只能做一件事情，

同步访问：在访问服务器时，客户端只能等待服务器的响应，不能做其他事情，用户体验差；

代表场合：
• 输入网址访问页面
• a标签的默认跳转
• submit按钮的表单提交

• 异步：在同一时间段可以完成不同的事情；

异步访问：在向服务器发送请求时，不影响用户在网页上做其他的操作；

代表场合：
1、用户名的重复性验证
2、聊天室
3、股票走势图
4、搜索建议(百度，京东，淘宝 的搜索框)

3. 创建 AJAX核心对象 - XMLHttpRequest

标准创建:var xhr=new XMLHttpRequest();

IE7以下 :
var xhr=new ActiveXObject(“Microsoft.XMLHttp”);

允许通过 window.XMLHttpRequest 判断浏览器是否支持 XMLHttpRequest()。如果 window.XMLHttpRequest的值是null的话，说明需要通过 ActiveXObject()创建，否则 需要通过 XMLHttpRequest() 来创建；

var xhr; 
//判断浏览器是否支持 XMLHttpRequest
if(window.XMLHttpRequest){
	xhr = new XMLHttpRequest();
}else{
	//浏览器不支持 XMLHttpRequest
	xhr = new ActiveXObject("Microsoft.XMLHttp");
}

4. XHR请求、响应

1、XHR请求：open()方法

语法：open(method,url,isAsyn)

• method：请求方式：get,post,put,delete

• url:文件在服务器上的位置，我们要请求的地址

• IsAsyn:true-异步，false-同步

• 实例：

function getResponse(){
	//1、获取 xhr
	var xhr = createXhr();
	//2、创建请求:使用get方式，异步的向response.php 发送一个请求
	xhr.open("get","response.php",true);	
}

2、XHR响应

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

• 实例：

function checkLogin()
{
    //1、获取 xhr
    var xhr = createXhr();
    //2、创建请求（post 方式）
    xhr.open("post", "01-check-login.php", true);
    //3、设置回调函数
    xhr.onreadystatechange = function(){
        if (xhr.readyState == 4 && xhr.status == 200)
        {
			$("show").innerHTML = xhr.responseText;
        }
    }

    //增加：设置Content-Type 的请求消息头(POST专用)
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    //4、发送请求(有请求主体)
    var uname = $("uname").value;
    var upwd = $("upwd").value;
    xhr.send("uname=" + uname + "&upwd=" + upwd);
}