【Ajax】关于Ajax那些事儿~

前几天学了些Ajax，感觉不是很好理解，我感觉实际用到的时候才能更好地理解，现在先用写博客的方法给自己捋一下思路~
加油~💜💜💜💜

一、初识Ajax

1.1.什么是Ajax

AJAX ：等同于异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1.2.Ajax的优点

• 不需要插件的⽀持，原⽣ js 就可以使⽤
• 减轻了服务器的负担
• 无须刷新整个页面，局部刷新
• 让用户的体验更好

1.3.同步请求

• 默认是true

• 浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。
• 同步是指一个线程要等待上一个线程执行完才能开始执行，
• 同步可以看做是一个单线程操作，只要客户端请求了，在服务器没有反馈信息之前是一个线程阻塞状态。

1.4.异步请求

• false

• 浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。
• 异步是一个线程在执行中，下一个线程不必等待它执行完就可以开始执行。
• 异步是个多线程。在客户端请求时，可以执行其他线程，并且在把这个线程存放在他的队列里面，有序的执行。
• 异步的效率要高于同步。如果数据在线程间共享，那么必须使用同步

1.5.Ajax的工作原理

Ajax的工作原理相当于在用户和服务器之间加了一个中间层（Ajax引擎），使用户操作和服务器响应异步化

步骤：

1. 创建XMLHttpRequest对象,即创建一个异步调用对象.
2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
3. 设置响应HTTP请求状态变化的函数.
4. 发送HTTP请求.
5. 获取异步调用返回的数据.
6. 使用JavaScript和DOM实现局部刷新.

function ajaxHttpRequestFunc(){
		let xmlHttpRequest;  // 创建XMLHttpRequest对象，即一个用于保存异步调用对象的变量
		if(window.ActiveXObject){ 
		// IE浏览器的创建方式
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }else if(window.XMLHttpRequest){
         // Netscape浏览器中的创建方式
            xmlHttpRequest = new XMLHttpRequest();
        }
		xmlHttpRequest.onreadystatechange=function(){
		// 设置响应http请求状态变化的事件
            console.log('请求过程', xmlHttpRequest.readyState);
			if(xmlHttpRequest.readyState == 4){ 
			// 判断异步调用是否成功,若成功开始局部更新数据
				console.log('状态码为', xmlHttpRequest.status);
				if(xmlHttpRequest.status == 200) {
					console.log('异步调用返回的数据为：', xmlHttpRequest .responseText);
					document.getElementById("myDiv").innerHTML = xmlHttpRequest .responseText; 
					// 局部刷新数据到页面
				} else { 
				// 如果异步调用未成功,弹出警告框,并显示错误状态码
					alert("error:HTTP状态码为:"+xmlHttpRequest.status);
				}
			}
		}
		xmlHttpRequest.open("GET","https://www.runoob.com/try/ajax/ajax_info.txt",true); 
		// 创建http请求，并指定请求得方法（get）、url以及验证信息
		xmlHttpRequest.send(null); // 发送请求
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

二、实现Ajax的基本步骤

2.1.AJAX - 创建 XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

//  在IE浏览器中创建XMLHttpRequest对象
var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

// 在Netscape浏览器中创建XMLHttpRequest对象
var xmlHttpRequest = new XMLHttpRequest();
1
2
3
4
5

由于无法确定用户使用的是什么浏览器,所以在创建XMLHttpRequest对象时,最好将以上两种方法都加上.如以下代码所示:

//定义一个变量,用于存放XMLHttpRequest对象
var xmlhttp;

//创建XMLHttpRequest对象的方法
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.2.AJAX - 向服务器发送请求

在WEB开发中，请求有两种形式，一个是get，一个是post,如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
1
2

1. open()方法

• 规定请求的类型、URL 以及是否异步处理请求。

  1. method：请求的类型；GET 或 POST
  2. url：文件在服务器上的位置
  3. async：true（异步）或 false（同步）

var url = "http://xxxxx";
xmlHttp.open("POST", url, true);
1
2

2. send()方法

• 将请求发送到服务器。

  1. string：仅用于 POST 请求

1

2.3.Post请求和get请求

区别：

• GET请求在URL中传送的参数是有长度限制的，而POST没有。
• GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。而POST数据不会显示在URL中。是放在Request body中。
• 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
• GET请求参数会被完整保留在浏览器历史记录里；相反，POST请求参数也不会被浏览器保留。
• GET请求只能进行url编码（application/x-www-form-urlencoded），而POST支持多种编码方式。
• GET请求会被浏览器主动缓存，而POST不会，除非手动设置。
• GET在浏览器回退时是无害的，而POST会再次提交请求

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：

1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

2.4.AJAX - 服务器 响应

获得来自服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

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

2.5.AJAX - onreadystatechange 事件（三种）

1. onreadystatechange 属性

求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件

xmlHttp.onreadystatechange = function() {
    //我们需要在这写一些代码
}
1
2
3

2. readyState 属性

用来监听 ajax 对象的 readyState 值改变的的行为，只要 readyState 的值发生变化了，那么就会触发该事件

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        //从服务器的response获得数据
    }
}
1
2
3
4
5

readyState可能会出现的值：

3. responseText 属性

通过 responseText 属性来取回由服务器返回的数据

```javascript
xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        document.myForm.time.value = xmlHttp.responseText;
    }
}
1
2
3
4
5
6
7

2.5.设置获取服务器返回数据的语句

• 如果XMLHttpRequest对象的readyState属性值等于4，表示异步调用过程完毕，就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。
• 但是，异步调用过程完毕，并不代表异步调用成功了，如果要判断异步调用是否成功，还要判断XMLHttpRequest对象的status属性值，只有该属性值为200，才表示异步调用成功
• 因此，要获取服务器返回数据的语句，还必须要先判断XMLHttpRequest对象的status属性值是否等于200

//设置当XMLHttpRequest对象状态改变时调用的函数，注意函数名后面不要添加小括号
xmlHttpRequest.onreadystatechange = getData;
 
//定义函数
function getData(){
    //判断XMLHttpRequest对象的readyState属性值是否为4，如果为4表示异步调用完成
    if(xmlHttpRequest.readyState==4){
        if(xmlHttpRequest.status == 200 || xmlHttpRequest.status == 0){//设置获取数据的语句
            document.write(xmlHttpRequest.responseText);//将返回结果以字符串形式输出
            //docunment.write(xmlHttpRequest.responseXML);//或者将返回结果以XML形式输出
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.6.发送请求

发送HTTP请求可以使用XMLHttpRequest对象的send()方法

// 设置发送请求的内容和发送报送。然后发送请求
XMLHttpRequest.send(data);
1
2

三、一个完整的Ajax实例

var xmlHttpRequest; //定义一个变量用于存放XMLHttpRequest对象
//定义一个用于创建XMLHttpRequest对象的函数
function createXMLHttpRequest()
{
	if(window.ActiveXObject)
	{
	//IE浏览器的创建方式
	xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}else if(windew.XMLHttpRequest)
	{
	//Netscape浏览器中的创建方式
	xmlHttpRequest = new XMLHttpRequest();
}
}
		//响应HTTP请求状态变化的函数
		function httpStateChange()
	{
		//判断异步调用是否完成
		if(xmlHttpRequest.readyState == 4)
	{
		//判断异步调用是否成功,如果成功开始局部更新数据
		if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0)
{
		//查找节点
		var node = document.getElementById("myDIv");
        //更新数据
		node.firstChild.nodeValue = xmlHttpRequest .responseText;
		}else
     {
		//如果异步调用未成功,弹出警告框,并显示出错信息
		alert("异步调用出错/n返回的HTTP状态码为:"+xmlHttpRequest.status + "/n返回的	HTTP状态信息为:" + xmlHttpRequest.statusText);
    }
    }
    }
		//异步调用服务器段数据
		function getData(name,value)
       {
		//创建XMLHttpRequest对象
		createXMLHttpRequest();
		if(xmlHttpRequest!=null)
      {
 		//创建HTTP请求
		xmlHttpRequest.open("get","ajax.text",true)
		//设置HTTP请求状态变化的函数
		xmlHttpRequest.onreadystatechange = httpStateChange;
		//发送请求
		xmlHttpRequest.send(null);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

有需要补充的会再加的！💜💜💜
~~