Ajax请求数据总结

一.Ajax概念：

1.Asynchronous JavaScript & XML

2.Web开发的一种技术

3.异步发送 & 请求数据

4.不需要重新刷新当前页面

5.JSON数据格式已经占据市场

二.XmlHttpRequest对象：

1.对象类型的API

2.在浏览器环境下使用

3.用于客户端和服务端数据的传递和接收

4.用于请求XML数据或者JSON或纯文本text

三.其他类似技术/库：

jQuery、Axios、Superagent、Fetch API、Prototype、Node HTTP

四.Ajax请求数据步骤：

1.创建XMLHttpRequest对象：

let xhr = new XMLHttpRequest();

2.请求数据： open(type,url/file,async) 三个参数分别是请求类型、url地址和是否异步

3.onload或者onreadystatechange方式请求：

	 xhr.onload = function () {
			 console.log(this.responseText); }

4. xhr.send();

5.请求txt文本文件数据的示例代码：

	let xhr = new XMLHttpRequest();//创建XMLHttpRequest对象
        	xhr.open("GET","data.txt",true); //open(type,url/file,async)
        	console.log(xhr.readyState);   //打印状态码1

            xhr.onprogress = function(){
            console.log(xhr.readyState);     //打印出状态码3
 		       };
       	 xhr.onload = function () {
            //  console.log(this.readyState);
            // console.log(this.responseText);
            document.getElementById("text").innerHTML = this.responseText;
        	 };
	xhr.send();
	  // xhr.onreadystatechange = function(){
     	  //     console.log(xhr.readyState);
       	  //     if(this.status == 200 && this.readyState == 4)
        	  //     {
       	  //        document.getElementById("text").innerHTML = this.responseText;
       	  //     }
       	  //     else if(this.status == 404)
       	  //     {
       	  //         document.getElementById("text").innerHTML = "not found";
       	  //     }
       	  // };

6.注意：

解析json数据的时候结果返回的是json数据，一般需要用JSON.parse方法将其转换为对象再进行调用

五.readyState状态码和HTTP状态码：

1.readyState状态码：

		 0 :请求未初始化
   		 1：服务器连接已建立
   		 2:请求已接收
    	 3：请求处理中
   		 4：请求已完成，且响应已就绪

2.HTTP 状态码：## 标题

    	200：服务器成功返回网页
   		404：请求的网页不存在
  		503：服务器暂时不可用

六.Ajax请求数据的两种方式：

1.onload：onreadystatechange可以监听到2、3、4所有的状态码；

用onprogress可以实现加载中的过程，监听到状态3

2.onreadystatechange：onreadystatechange可以监听到2、3、4所有的状态码

七.正常表单提交数据到PHP和Ajax请求数据不同：

前者会跳转刷新，Ajax可以不需要重新刷新当前页面请求数据

八.get和post方法区别：

post中open中第二个参数传递不一样，需要设置请求头：

	xhr.setRequestHeader("Content-type","application/x-www-form.urlencoded");