AJAX技术详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_36585489/article/details/102522783

AJAX工作原理

一、AJAX - 创建 XMLHttpRequest 对象

XMLHttpRequest是AJAX的基础

XMLHttpRequest 用于异步与服务器交换数据，意味着在不重新加载整个页面的情况下，就能与服务器交换数据并更新部分网页

创建XMLHttpRequest对象
（1）所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象
创建XMLHttpRequest对象的语法：

variable=new XMLHttpRequest();    //variable表示以声明的变量

（2）老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveXObject

variable=new ActiveXObject("Microsoft.XMLHTTP");

（3）为了应对所有的现代浏览器，包括IE5和IE6，提高兼容性，可采用以下方法创建XMLHttpRequest对象：

function LoadXMLDoc(){
	var xmlhttp; //声明一个变量
	if(window.XMLHttpRequest){  //检查浏览器是否支持XMLHttpRequest对象,支持执行以下步骤
		xmlhttp=new XMLHttpRequest();
	}
	else{   //如果不支持XMLHttpRequest对象，创建ActiveXObject
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
	}
}

二、AJAX - 向服务器发送请求请求

向服务器发送请求

XMLHttpRequest 对象用于和服务器交换数据。

如果将请求发送到服务器，需要使用XMLHttpRequest对象的</font color=red>open()和send()方法：

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

1、open方法：
语法：open(method,url,async)
意义：规定请求的类型，URL以及是否是异步处理
method ：请求类型：GET（从指定服务器获取数据）或者POST（提交数据给指定服务器）
url ：文件在服务器上的位置
async ： true（异步）或 false（同步）

2、send方法
语法：send(string)
意义：将请求发送到服务器
string ：仅用于POST请求

使用GET还是POST

与POST相比，GET更简单也更快，并且在大部分下都能使用

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

1、GET请求
作用：从指定服务器获取数据

如果使用GET方法发送信息，就需要向URL添加信息。（不发送信息时可以不添加）
理由：使用GET方法时，将查询字符串参数（键值对）追加到URL的末尾，以便将信息发送给服务器
**注意：**查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL的末尾；而且所有名-值对儿 都必须由和号（&）分隔：

<script>
function loadXMLDoc(){
  var xmlhttp;
  //（1）创建一个新的XMLHttpRequest对象，即创建一个异步调用对象
  if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  }
  else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  //（3）设置响应http请求状态变化的函数
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  //（2）创建一个新的Http请求，并指明该http请求的方法、url和验证信息
  xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);   //fname=Henry&lname=Ford查询字符串参数
  //（4）发送http请求
  xmlhttp.send();
}
</script>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

结果：
在这里插入图片描述
2、POST请求
作用：提交数据给指定服务器

使用POST方法时，查询字符串在POST信息中单独存在，和HTTP请求一起发送到服务器：

xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

如果需要向HTML表单那样获取POST数据，请使用setRequestHeader()来添加HTTP头。然后在send方法中规定你希望发送的数据：

 xmlhttp.open("POST","/try/ajax/demo_post2.php",true);  //不需要查询参数字符
 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xmlhttp.send("fname=Henry&lname=Ford");

结果：
在这里插入图片描述
setRequestHeader(header,value)方法：
作用：向请求添加HTTP头。
header：规定头的名称； value：规定头的值

HTML发送表单数据
method=“get”：表单数据被作为 URL 变量的形式来发送
method=“post”：表单数据被作为 HTTP post 事务的形式来发送。

GET与POST的区别总结：
（1）GET是从服务器上获取数据；POST是想服务器传送数据
（2）使用GET方法时，需将查询字符串参数（键值对）追加到URL的末尾，以便将信息发送给服务器；使用POST方法时，查询字符串在POST信息中单独存在，和HTTP请求一起发送到服务器（GET参数通过URL传递，POST放在Request body中）
（3）GET请求参数会保存在浏览器历史记录里，而POST中的参数不会被保留。
（4）以GET请求的URL能够保存为浏览器书签，而POST请求不会
（5）GET请求有长度限制，POST请求没有
（6）对参数的数据类型，GET只接受ASCII字符，而POST没有限制
（7）GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
（8）GET在浏览器回退时是无害的，而POST会再次提交请求

url - 服务器上的文件

open() 方法的 url 参数是服务器上文件的地址：
该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件（在传回响应之前，能够在服务器上执行任务）。

xmlhttp.open("GET","ajax_test.html",true);

异步 - True 或 False

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

xmlhttp.open("GET","ajax_test.html",true);

Async=true
当使用 async=true 时，规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

Async = false
不推荐使用
JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。（类似于同步传送）
注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

三、 AJAX - 服务器响应

获取响应
如果需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText或responseXML属性。

1、responseText属性：
描述：获取字符串形式的响应数据
适用情况：来自服务器的响应并非XML

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

2、responseXML 属性
描述：获得XML形式的响应数据
适用情况：来自服务器的响应是XML，而且需要作为XML对象进行解析

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc(){
  var xmlhttp;
  var txt,x,i;
  if (window.XMLHttpRequest){
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
    //请求 cd_catalog.xml 文件，并解析响应（responseXML属性）：
      xmlDoc=xmlhttp.responseXML; //来自服务器的响应是XML
      txt="";
      x=xmlDoc.getElementsByTagName("ARTIST");
      for (i=0;i<x.length;i++){
        txt=txt + x[i].childNodes[0].nodeValue + "<br>";
      }
      document.getElementById("myDiv").innerHTML=txt;
    }
  }
  xmlhttp.open("GET","cd_catalog.xml",true); //XML
  xmlhttp.send();
}
</script>
</head>
<body>
<h2>我收藏的 CD :</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">获取我的 CD</button>
</body>
</html>

四、AJAX-onreadystatechange事件

概述：
当请求被发送到服务器是，需要执行一些基于响应的任务。（响应http请求状态变化的函数）
每当readyState改变时，就会触发onreadystatechange事件
readyState属性存有XMLHttpRequest的状态信息
XMLHttpRequest对象的三个重要属性：
在这里插入图片描述
注：
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：


<script>
function loadXMLDoc(){
	var xmlhttp;
	if (window.XMLHttpRequest){//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else{// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	//响应http请求状态变化的函数
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){ //请求已完成且响应就绪，页面OK
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
}
</script>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

注意： onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。

使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

var xmlhttp;
//创建 XMLHttpRequest 对象编写一个标准的函数,该函数包括url,onreadystatechange事件
function loadXMLDoc(url,cfunc){
if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else{// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;   //onreadystatechang事件
xmlhttp.open("GET",url,true);  //在调用函数时写明url路径
xmlhttp.send();
}
//调用
function myFunction(){
	loadXMLDoc("/try/ajax/ajax_info.txt",function(){  //调用，该函数包括url,onreadystatechange事件
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}
</script>
<div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
<button type="button" onclick="myFunction()">修改内容</button>