Ajax基础（一）

最新推荐文章于 2024-09-03 01:23:13 发布

椋七

最新推荐文章于 2024-09-03 01:23:13 发布

阅读量111

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43627109/article/details/103035941

版权

前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1、允许浏览器与服务器通信而无需刷新当前页面的技术都叫做Ajax。
在这里插入图片描述
2、不用刷新整个页面便可与服务器通讯的办法：
①Flash
②Java applet
③框架：如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面。
④隐藏的iframe
⑤XMLHttprequest：该对象是对JavaScript的一个扩展，可使网页与服务器进行通信。是创建Ajax应用的最佳选择。实际上通常把Ajax当成XMLHttprequest对象的代名词。
3、Ajax工具包
Ajax并不是一项新技术，它实际上时几种技术，每种技术各尽其职，以一种全新的方式集合在一起。

服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。
XML（可扩展标记语言）：是一种描述数据的格式，Ajax程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML是其中一种选择。
XHTML（使用扩展超媒体标记语言）和CSS（文档对象模型）：标准化呈现。
DOM（文档对象模型）：实现动态显示和交互。
使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取。
使用JavaScript绑定和处理所有数据。
4、创建XMLHttpRequest对象

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

5、XMLHttpRequest方法

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader(“header”)	返回指定首部的串值
open(“method”,“url”)	建立对服务器的调用。Method参数可以是GET、POST或PUT、url参数可以是相对URL或绝对URL
send(content)	向服务器发送请求
setRequestHeader(“header”,“value”)	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

6、XMLHttpRequest属性

属性	描述
onreadystatechange	每个状态改变是都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求的状态，有5个可取值；0=未初始化、1=正在加载、2=已经加载、3=交互中、4=完成
responseText	服务器的响应，表示为一个串
responseXML	服务器的响应，表示为XML。这个对象可以解析为DOM对象。
stasus	服务器的HTTP状态码(200对应OK、400对应NotFount等)
statusText	HTTP状态码的相应文本(OK或NotFount等)

7、创建XMLHttpRequest对象的过程：

windox.onload = function(){
				//1、获取 a 节点,并为其添加 onclick 响应函数
				document.getElementsByTagName("a")[0].onclick = function(){
					
					//3、创建一个 XMLHttpRequest 对象
					var request = new XMLHttpRequest();
					
					//4、准备发送请求的数据: url
					var url = this.href;
					var method = "GET";
					
					//5、调用 XMLHttpRequest 对象的 open 方法
					request.open(method, url);
					
					//6、调用 XMLHttpRequest 对象的 send 方法
					request.send(null);
					
					//7、为 XMLHttpRequest 对象添加 onreadystatechange 响应函数
					request.onreadystatechange = function()｛
						//8、判断响应是否完成: XMLHttpRequest 对象的readyState 属性值为4的时候
						if(request.readyState ==4){
							//9、再判断响应是否可用: XMLHttpRequest 对象 status 属性值为 200
							if(request.status ==200 || request.status ==304){
								//10、打印响应结果: responseText
								alert(request.responseText);
								
							}
						}
					｝				
					//2、取消 a 节点的默认行为
					return false;
				}
			}

8、发送请求
利用XMLHttpRequest 实例与服务器进行通信包含以下三个关键部分：

onreadystatechange 事件处理函数
该事件处理函数由服务器触发，而不是用户。
在Ajax执行过程中，服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest对象的readyState来实现。改变readyState属性是服务器对客户端连接操作的一种方式。每次readyState属性的改变都会触发readyStatechange事件。
open方法
open(method,url,asynch)
method：请求类型
“GET”:只想从服务器检索一个文件，而不需要发送任何数据。（可以在GET请求里通过附加在url上的查询字符串来发送数据，数据大小限制为2000个字符）
“POST”:向服务器发送数据
在某些情况下，有些浏览器会把多个XMLHttpResquest请求的结果缓存在同一个url，如果对每个请求的响应不同，就会带来不好的结果。在此将时间戳追加到url的最后，就能确保url的唯一性，从而避免浏览器缓存结果。
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

·url：路径字符串，指向你所请求的服务器上的那个文件。
· asynch：表示请求是否要异步传输，默认值为true。
①指定为true，在读取后面的脚本之前，不需要等待服务器的响应。
②指定为false，当脚本处理过程经过这点时，会停下来，一直等到Ajan请求执行完毕再继续执行。

send方法
setRequestHeader(“header”,“value”)
当浏览器向服务器请求页面时，他会伴随这个请求发送一组首部信息，这些首部信息是一系列描述请求的元数据。首部信息用来生命一个请求是GET还是POST。
header：首部的名字
value：首部的值
如果用POST请求的服务器发送数据，需要将"Content-type"的首部设置为"application/x-www-form-urlencoded",他会告知服务器正在发送数据，并且数据已经符合URL编码了。
该方法必须在open()之后才能调用。
eg：

var url="../jsp/forumServlet";
var nameValue = trim(document.formAddForm.name.value);
xhr.open("POST",url);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send("method-name_isExist"+"&name"+nameValue);

9、接收相应

readyState
stasus：常用状态码及其含义：
404 没找到网页(not found)
403 禁止访问(for bidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)
在XMLHttpRequest 对象中，服务器发送的状态码都保存在status属性里。通过把这个值和200或304比较，可是确保服务器是否已发送了一个成功的响应。
responseText
包含了从服务器发送的数据。他是一个HTML,XML或普通文本，这取决于服务器发送的内容。
responseXML
如果服务器返回的是XML，那么数据将储存在responseXML属性中。
只用服务器发送了带有正确部首信息的数据时，responseXML属性才是可用的。MIME类型必须为text/xml。