文档章节

[Ajax-相濡以沫,不如相忘于江湖] Ajax核心: XMLHttpRequest对象

LvSantorini
 LvSantorini
发布于 2016/01/28 21:16
字数 2133
阅读 168
收藏 10

Ajax应用工作模式/过程:

    第一步,初始化XMLHttpRequest对象;

    第二步,打开与服务器的连接。打开连接时,指定发送请求的方法: 采用GET或POST; 指定是否采用异步方式;

    第三部,设置监听XMLHttpRequest状态改变的事件处理函数;

    第四部,发送请求。如采用POST方式发送请求,可发送带参数的请求。

下面给出一个示例: 级联菜单。页面中两个下拉框,选择或改变下拉框1的值将影响下拉框2中所加载的值。

<!DOCTYPE html>
<html>
<head>
	<title>XMLHttpRequest -- Test</title>
</head>
<body>
	<select name="first" id="first" onchange="change(this.value);">
		<option value="1">中国</option>
		<option value="2">美国</option>
		<option value="3">日本</option>
	</select>
	<select name="second" id="second"></select>
	<div id="output"></div>

	<script type="text/javascript">
		// 定义XMLHttpRequest对象
		var xmlrequest;
		// 初始化XMLHttpRequest对象
		function createXMLHttpRequest() {
			if (window.XMLHttpRequest) {
				xmlrequest = new XMLHttpRequest();
			} else if (window.ActiveXObject) {
				try {
					xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					try {
						xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
					} catch (e) {
					}
				}
			}
		}

		function change(id) {
			// 初始化XMLHttpRequest对象
			createXMLHttpRequest();
			// 设置请求相应的URL
			var uri = "second.jsp?id=" + id;
			// 打开与服务器响应地址的连接
			xmlrequest.open("POST", uri, true);
			// 设置请求头
			xmlrequest.setRequestHeader("Content-Type", "application/x-www.form-urlencoded");
			// 设置处理相应的回调函数
			xmlrequest.onreadystatechange = processResponse;
			// 发送请求
			xmlrequest.send(null);
		}

		// 定义处理响应的回调函数
		function processResponse() {
			// 响应完成且响应正常
			if (xmlrequest.readyState == 4) {
				if (xmlrequest.status == 200) {
					var cities = xmlrequest.responseText.split('$');
					var displaySelect = document.getElementById("second");
					displaySelect.innerHTML = null;
					
					for (var i=0; i<cities.length; i++) {
						var opt = document.createElement("option");
						opt.innerHTML = cities[i];
						displaySelect.appendChild(opt);
					}
					// 信息已经成功返回,开始处理信息
					//var headers = xmlrequest.getAllResponseHeaders();
					// 通过警告框输出响应头
					//alert("响应头类型: " + typeof headers + "\n" + headers);
					// 在页面输出所有响应头
					//document.getElementById("output").innerHTML = headers;
				}
			} else {
				// 页面不正常
				//window.alert("状态信息: " + xmlrequest.readyState + " -- 服务器响应状态信息: " + xmlrequest.status + "-- 服务器状态信息描述: " + xmlrequest.statusText + "-- 请求页面有异常!");
			}
		}
	</script>
</body>
</html>

XMLHttpRequest对象定义:

XMLHttpRequest是一套可以在JavaScript、VBScript、JScript等脚本语言中使用的API,它通过HTTP协议异步地向服务器发送请求,获取服务器返回的响应。XMLHttpRequest的用处是: 提供与服务器异步通信的能力。

XMLHttpRequest的方法和属性:

XMLHttpRequest包含了一些基本的属性和方法,XMLHttpRequest正是通过这些属性和方法与服务器通信的。

XMLHttpRequest的方法:

   XMLHttpRequest对象的方法并不多,以下是其基本方法:

  • abort(): 停止发送当前对象。

  • getAllResponseHeaders(): 获取服务器返回的全部响应头。

  • getResponseHeader("headerLabel"): 根据响应头的名字,获取对应的响应头。

  • open("method", "URL"[,asyncFlag[,"userName"[,"password"]]]): 建立与服务器URL的连接,并设置请求的方法,以及是否使用异步请求。如果远程服务需要使用用户名、密码,则提供对应的信息。

  • send(content): 发送请求。其中content是请求参数。

  • setRequestHeader("label", "value"): 在发送请求之前,先设置请求头。

XMLHttpRequest的属性:

  • onreadystatechange: 该属性用于指定XMLHttpRequest对象状态改变时的事件处理函数。

  • readyState: 该属性用于获取XMLHttpRequest对象的处理状态。

  • responseText: 该属性用于获取服务器的响应文本。

  • responseXML: 该属性用于获取服务器相应的XML文档对象。

  • status: 该属性是服务器返回的状态吗,只有服务器的响应已经完成时,才会有该状态码。

  • statusText: 该属性是服务器返回的状态文本信息,只有当服务器的响应已经完成时,才会有该状态文本信息。 

属性详解:

onreadystatechange:

    onreadystatechange属性用于指定XMLHttpRequest对象的状态改变函数。当XMLHttpRequest对象的状态改变时,该函数将被触发。onreadystatechange属性的作用与按钮对象的onclick属性一样,都是事件处理属性。也就是说,XMLHttpRuquest对象是事件源,它可以引发readystatechange事件。当程序讲一个函数引用赋给XMLHttpRequest对象的onreadystatechange属性后,该函数即成为XMLHttpRequest对象的事件处理器。每次XMLHttpRequest发生readystatechange事件,都会触发监听该事件的事件处理器。

readyState:

    XMLHttpRequest对象有如下几种状态,这些状态可通过readyState属性获得:

  • 0:XMLHttpRequest对象还没有完成初始化

  • 1:XMLHttpRequest对象开始发送请求

  • 2:XMLHttpRequest对象的请求发送完成

  • 3:XMLHttpRequest对象开始读取服务器的响应

  • 4:XMLHttpRequest对象读取服务器响应结束

    XMLHttpRequest对象的这几种状态信息可通过readyState属性读取。每当XMLHttpRequest对象的readyState属性改变时,其onreadystatechange属性指定的方法都会被触发。

status和statusText:

    服务器的响应完成后(readyState=4),依然不能直接获取服务器响应。因为服务器响应也有很多种情况。为了判断服务器的响应是否正确,可以检测XMLHttpRequest的status或statusText属性。当服务器的响应正常时,JavaScript才应该读取服务器响应信息,并将响应信息动态加载到目标页面。

    服务器常用的状态码及其对应的含义如下:

  • 200:服务器响应正常

  • 304:该资源在上次请求之后没有任何修改。这通常用于浏览器的缓存机制,使用GET请求时尤其需要注意

  • 400:无法找到请求的资源

  • 401:访问资源的权限不够

  • 403:没有权限访问资源

  • 404:需要访问的资源不存在

  • 405:需要访问的资源被禁止

  • 407:访问的资源需要代理身份验证

  • 414:请求的URL太长

  • 500:服务器内部错误

    如果想通过JavaScript获取服务器响应,必须先判断服务器响应是否完成。要判断服务器的响应是否完成,只需判断XMLHttpRequest对象的readyState属性即可,当readyState值为4,代表响应完成;服务器响应完成后,还应判断服务器响应是否正确,要判断服务器响应是否正确,可通过判断XMLHttpRequest对象的status属性进行。当status值为200时,服务器响应正确,否则响应不正常。

发送请求:

发送GET请求:

    通常情况下,GET请求用于从服务器上获取数据,POST请求用于向服务器发送数据。GET请求将所有请求参数转换成一个查询字符串,并将该字符串添加到请求的URL之后,因而可在请求的URL后看到请求参数名、请求参数值。如果将某个表单的action属性设置为GET,则请求会将表单中个字段的名和值转换为字符串,并附加到URL之后。

    GET 和 POST异同:

  • GET请求传送的数据量较小,一般不能大于2KB。POST传送的数据量较大,通常认为POST请求参数的大小不受限制,但往往取决于服务器的限制。通常来说,POST请求的数据量总比GET请求的数据量大。

  • POST请求则通过HTTP POST机制,将请求的参数以及对应的值放在HTML Header中传输,用户看不到明码的请求参数值。

当使用Ajax发送异步请求时,建议使用POST请求,而不是GET请求。发送GET请求需注意如下两点:

  • 通过open方法开与服务器的连接时,设置使用GET方法。

  • 如需要发送请求参数,应将请求参数转成查询字符串,并追加到请求URL之后。

注意:

虽然GET请求的请求参数附加在URL之后的,但使用send方法时,还是应该为send方法传入参数。如果调用send方法时无须发送请求参数,则使用null作为参数即可。

发送POST请求:

POST请求的适应性更广,可使用更大的请求参数,且POST请求的请求参数通常不能直接看到。

发送POST请求通常需要一下三个步骤:

第一步,使用open方法打开连接时,指定使用POST方式发送请求;

第二步,设置正确的请求头,POST请求通常应设置Content-Type请求头;

第三步,发送请求,把请求参数转换为查询字符串,将该字符串作为send()方法的参数。

注意: 使用POST方法发送请求,一样可以将请求参数附加到URL之后。




















© 著作权归作者所有

LvSantorini
粉丝 13
博文 37
码字总数 40332
作品 0
呼和浩特
程序员
私信 提问
[Ajax-相濡以沫,不如相忘于江湖] Ajax初识

Ajax的全称是 Asynchronous JavaScript And XML,即异步JavaScript和XML。2005年由Jesse James Garrett首先提出。在之后极短的时间内,Ajax被广泛应用到大量B/S结构的应用中,改进了传统的W...

LSantorini
2016/01/26
30
0
【Ajax】Ajax总结

一、什么是Ajax: 允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax(AsynchronousJavaScript and XML)。不用刷新整个页面便可与服务器通讯的办法。比如:高德地图就是不用刷新...

j15533415886
2017/12/10
0
0
XMLHttpRequest对象的创建

首先先介绍一下XMLHttpRequest对象,我们都知道Ajax它并不是单单一门技术,而是几种技术的融合。XMLHttpRequest是Ajax技术体系中最为核心的技术,如果没有XMLHttpRequest,Ajax的其余技术就无...

邵鸿鑫
2014/11/04
0
0
小白来实现一个Ajax请求[Ajax使用方法及相关知识点详细解析——超级全]

写在前面: 本文主要总结整理Ajax使用方法背景知识点的详细解析,以及Ajax跨域的具体使用方式并且对栗子进行了讲解,需要的朋友可以过来参考下,喜欢的可以点波赞,或者关注一下本人,希望通...

OB丶Koro1
2017/06/01
0
0
Java——Ajax+Tomcat完成异步请求

Ajax最为网页异步交互技术相信大家并不陌生,这里我也不做过多介绍,详情点击(百度百科)。很多框架也封装了Ajax技术,使用起来更加简单,比如jQuery等等,这里为了了解原理,我们使用原生的...

邵鸿鑫
2015/10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

简单的博客系统(四)Django请求HTML页面视图信息--基于函数的视图

1. 编写用于查询数据的功能函数 应用目录 下的 views.py 文件通常用于保存响应各种请求的函数或类 from django.shortcuts import renderfrom .models import BlogArticles# Create your ...

ZeroBit
28分钟前
2
0
用脚本将本地照片库批量导入到Day One中

因为目前iCloud 空间已经不足,其中95%都是照片,之前入手了DayOne,且空间没有限制,订阅费一年也不少,再加上DayOne作为一款日记App 也比较有名,功能方面最大的就是地理视图与照片视图,尤...

在山的那边
昨天
13
0
Vue-Ueditor

记录,忘了还要写啥了,先发吧,后面再补。。。 代码示例 import UEditor from '@/components/UE.vue';components: { UEditor },return {config: { //可以在此处定义工...

华山猛男
昨天
2
0
jupyter部署安装

python373 -m ipykernel install --name python373 ipython kernelspec list sc create myjupyterservice binpath="D:\apply\Python373\Scripts\jupyter-notebook --config=V:/my_work/jupyt......

mbzhong
昨天
4
0
聊聊feign的Contract

序 本文主要研究一下feign的Contract Contract feign-core-10.2.3-sources.jar!/feign/Contract.java public interface Contract { /** * Called to parse the methods in the class t......

go4it
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部