AJAX相关知识

1、AJAX：是一种在无需重新加载整个网页的情况下能够更新部分网页的技术

     AJAX=异步JavaScript和XML

     同步：阻塞。必须等前面的程序执行完毕以后才能执行后面的程序

     异步：非阻塞。前面程序是否执行完毕不影响后面程序执行

---

2、创建XMLHttpRequest对象：     

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

---

3、JavaScript错误-throw、try和catch：

try{
    执行的代码;
    throw new Error("错误文本信息");
   }catch(error){
    补救的代码;
   }

---

4、向服务器发送请求：使用XMLHttpRequest对象的open()和send()方法

     1）open()方法：规定请求的类型、URL以及是否异步处理请求

          语法：open(method,url,async)

          method：请求的类型。get或post

          url：文件在服务器上的位置

          async：true（异步）或false（同步）

     2）send()方法：将请求发送到服务器

---

5、onreadystatechange事件：1）当请求被发送到服务器时，我们需要执行一些基于响应的任务

                                                  2）每当readyState改变时就会触发onreadystatechange事件

                                                  3）readyState属性存有XMLHttpRequest的状态信息，从0到4发生变化

                                                       0：请求未初始化

                                                       1：服务器连接已建立

                                                       2：请求已接收

                                                       3：请求处理中

                                                       4：请求已完成且响应已就绪

     status：状态码

---

6、服务器响应：使用XMLHttpRequest对象的responseText或responseXML属性

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

     responseXML：获得XML形式的响应数据

---

7、get请求和post请求：

     1）get请求：直接将数据以查询字符串的格式拼接在url后面进行传输

          优点：简单方便

          缺点：不安全、有最大限制、不能上传

     2）post请求：通过浏览器内部传输数据。表单在进行post提交数据的时候设置请求头，提交的数据格式默认是enctype="application/x-www-form-urlencoded"

          优点：安全、理论上没有最大限制、可以上传

8、封装AJAX

function ajax({method = "get", url, data, success, error}){
    var xhr = null;
    try{
		xhr = new XMLHttpRequest();
	   }catch(error){
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	   }

	if(method == "get" && data){
		url += "?" + data + "&" + new Date().getTime();
	}

	xhr.open(method, url, true);

	if(method == "get"){
		xhr.send();
	}else{
		xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
		xhr.send(data);
	}

	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
		    if(xhr.status == 200){
		//处理下载完数据的方式都是一样的
		/*
          如何去处理下载完成的数据不确定
		  具体要写什么代码不确定
		  回调函数  把函数当做参数传入
		*/
	            if(success){
		            success(xhr.responseText)
	            }
	        }else{
		        if(error){
			        error("Error:" + xhr.status);
		        }
	        }
        }
    }
}