摘要:而中引入一个名为的对象实现与相同的功能,和其他浏览器则使用。如果是默认值,表示是异步请求。下面的例子中,通过是否为的状态码来判断调用是否是成功的。在检查了请求的状态和响应的状态码后,就可以接收服务器端发送的数据并处理。
什么是AJAX?
AJAX的意思就是异步的JavaScript和XML。简而言之,它是使用XMLHttpRequest对象与服务器端通信的脚本语言。它可以发送及接收各种格式的信息,包括JSON、XML、HTML和文本文件。AJAX最为吸引人的就是它的“异步”特性,这意味着AJAX可以无需刷新页面而与服务器端进行通信。允许你根据用户事件来更新部分页面内容。
可以考虑的两个特性:
向服务器端发送请求,而不用重新加载页面。
从服务器端接收数据并处理。
第一步:如何发送一个HTTP请求需要通过XMLHttpRequest实现使用JavaScript向服务器端发送一个HTTP请求。而Internet Explorer(IE)中引入一个名为XMLHTTP的ActiveX对象实现与XMLHttpRequest相同的功能,Mozilla、Safari和其他浏览器则使用XMLHttpRequest。
如果要兼容各个浏览器的话,可以这样来做:
var httpRequest; if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ... httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE 6 and older httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }
注意:出于演示目的,上面创建XMLHTTP实例是简化了的代码。关于更加真实的例子,请参阅本文的第三步。
接下来,当接收到服务器端响应时,需要告诉HTTP请求对象使用JavaScript函数来处理响应。将XMLHttpRequest对象的onreadystatechange属性设置为该函数的名称,当请求的状态变化时,该函数会被调用。
httpRequest.onreadystatechange = nameOfTheFunction;
注意:该函数名没有传递参数的括号和参数,这表示只是分配了一个函数的引用,而不是真正调用该函数。当然,也可以动态定义一个匿名函数,这样可以实时地处理响应。
httpRequest.onreadystatechange = function(){ // process the server response };
在处理完服务器端的响应之后,我们就可以调用XMLHttpRequest对象的open()和send()方法向服务器端发送请求了。
httpRequest.open("GET", "http://www.example.org/some.file", true); httpRequest.send(null);
open()方法的第一个参数:HTTP请求方法 - GET、POST、HEAD及任何服务器端支持的方法。根据HTTP标准保持大写,否则一些浏览器(例如火狐)可能无法处理请求。关于HTTP请求方法的更多信息,你可以查看W3C规范
open()方法的第二个参数:请求的URL。出于安全考虑,不能调用第三方域的页面内容。当调用open()方法时,一定确认使用相同域名内的页面,否则会得到“permission denied”的错误提示。常见的错误是使用domain.tld访问网站,却使用www.domain.tld来请求页面。如果真的需要发送一个请求到另一个域的话,可以查看HTTP访问控制
open()方法的第三个参数:可选,是否是异步请求。如果是true(默认值),表示是异步请求。
send()方法的参数表示当请求为POST时,向服务器端发送请求的数据内容。如果发送的是表单数据格式的话,服务器端可以向字符串一样地解析。
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
向服务器端发送的数据格式也可以是JSON、SOAP等格式。
注意:如果使用POST方式发送数据的话,在调用send()方法前,需要设置请求的MIME类型。:
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");第二步:处理服务器端的响应
当发送请求时,已经定义了一个函数来处理响应。
httpRequest.onreadystatechange = nameOfTheFunction;
这个函数可以做什么呢?首先,该函数需要检查请求的状态。如果状态值为4的话,这表示接收到完成的服务器端响应,可以继续处理。
if (httpRequest.readyState === 4) { // everything is good, the response is received } else { // still not ready }
readyState的值列表如下:
0 - 未初始化
1 - 正在加载
2 - 加载完毕
3 - 交互中
4 - 完成
接下来需要检查HTTP服务器端响应的状态代码,W3C网站 列出了所有的状态代码。下面的例子中,通过是否为200 OK的状态码来判断AJAX调用是否是成功的。
if (httpRequest.status === 200) { // perfect! } else { // there was a problem with the request, // for example the response may contain a 404 (Not Found) // or 500 (Internal Server Error) response code }
在检查了请求的状态和响应的状态码后,就可以接收服务器端发送的数据并处理。有两种选项访问这些数据:
httpRequest.responseText - 将服务器端响应作为文本字符串返回
httpRequest.responseXML - 将响应作为一个XMLDocument对象返回,该对象可以使用JavaScript DOM函数进行遍历。
注意,上述步骤只有异步请求(open()方法的第三个参数设置为true)时才是有效的。如果使用同步请求的话,是不需要指定函数的。在调用send()方法后就可以访问到服务器端返回的数据,因为脚本会停止并等待服务器端的响应。
第三步:一个简单的例子下面来做一个简单的HTTP请求。JavaScript将请求一个包含“I"m a test.”文本的“test.html”HTML文档,然后使用alert()方法打印test.html文件的内容。
Make a request
在这个例子中:
在浏览器中用户单击“Make a request”链接;
事件处理器调用makeRequest()方法,通过向该函数传递的参数,请求一个处在同一目录中的“test.html”HTML文件;
请求后,(onreadystatechange)执行 alertContents()方法;
alertContents()方法用于检查如果正确地接收到响应,利用alert()方法打印“test.html”文件包含的内容。
注意:如果你发送一个请求后返回的是一段XML代码,而不是一个静态的XML文件的话,在Internet Explorer中必须设置一些响应头。如果没有设置响应头“Content-Type: application/xml”的话,当试图访问XML元素时IE将抛出一个"Object Expected"的JavaScript错误。
注意:如果没有设置头“Cache-Control: no-cache”的话,浏览器将缓存响应并不会重新提交请求。可以添加像时间戳或一个随机数的不同GET请求参数(参考 bypassing the cache)。
注意:如果httpRequest变量是全局的,makeRequest()方法因为冲突可能会被重写。将httpRequest变量定义在一个闭包中的话,可以避免AJAX函数的冲突。
注意:如果出现通信错误(如服务器端被关闭),当试图访问状态字段时在onreadystatechange的方法中将会抛出一个异常。确保if语句声明在try..catch语句中。
function alertContents() { try { if (httpRequest.readyState === 4) { if (httpRequest.status === 200) { alert(httpRequest.responseText); } else { alert("There was a problem with the request."); } } } catch( e ) { alert("Caught Exception: " + e.description); } }第四步:使用XML进行响应
在前面的例子中,当接收到响应后使用XMLHttpRequest对象的responseText属性访问“test.html”文件包含的内容。现在尝试一下responseXML属性。
首先,创建一个用于请求的名为“test.xml”的有效XML文档,代码如下:
I"m a test.
在脚本中,只需要修改请求行:
onclick="makeRequest("test.xml")">
然后在alertContents()方法中,需要使用如下代码替换alert(httpRequest.responseText);这一行代码:
var xmldoc = httpRequest.responseXML; var root_node = xmldoc.getElementsByTagName("root").item(0); alert(root_node.firstChild.data);
这段代码需要由responseXML给予的XMLDocument对象,然后使用DOM方法来访问XML文档中的数据。
第五步:处理数据最后,向服务器端发送一些数据并接收响应。这次JavaScript脚本请求一个动态页面“test.php”,该页面将根据发送的数据返回一个“computedString”-“Hello, [user data]!”,并使用alert()方法进行打印。
首先,向HTML页面中添加一个文本框,用户可以通过该文本框输入他们的名字:
Make a request
还需要添加一行事件处理器用于从文本框获取用户的数据,并将该数据随着URL传递给makeRequest()方法:
document.getElementById("ajaxButton").onclick = function() { var userName = document.getElementById("ajaxTextbox").value; makeRequest("test.php",userName); };
修改makeRequest()方法用于接收用户数据并发送给服务器端。将请求方式从GET修改为POST,用户数据作为参数传递给httpRequest.send()方法:
function makeRequest(url, userName) { ... httpRequest.onreadystatechange = alertContents; httpRequest.open("POST", url); httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); httpRequest.send("userName=" + encodeURIComponent(userName)); }
alertContents()方法可以向第三步一样利用alert()方法打印服务器端返回的数据。假设服务器端返回的是computedString和用户数据的话,如果用户在文本框中输入“Jane”服务器端响应的内容会像是这样:
{"userData":"Jane","computedString":"Hi, Jane!"}
在alertContents()方法中使用这些数据,不仅可以使用alert()方法打印responseText的内容,还可以将其解析并打印computedString属性内容:
function alertContents() { if (httpRequest.readyState === 4) { if (httpRequest.status === 200) { var response = JSON.parse(httpRequest.responseText); alert(response.computedString); } else { alert("There was a problem with the request."); } } }
注明:
本文翻译于Mozilla Developer Network
翻译者:金云龙
原文地址:https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/85748.html
摘要:我们将采用方式完成,在提交保存视频之前,通过方式实现提前于保存视频之前,保存演员信息。我们再在数据库中确认一下下面,我们对输入的用户姓名进行分离。 我们试着直接在Select中输入新的演员showImg(https://segmentfault.com/img/bVbcqpZ?w=386&h=276); 点击保存 showImg(https://segmentfault.com/img...
引 如今,各种互联网的Web应用程序层出不穷,那么如何快速入门,成长为一个优秀的Web开发工作者呢? 这个问题不容易回答,几乎所有的培训机构都不能清晰地解答。 所以对于Web开发刚刚入门的菜鸟们,我觉得只有通过去做,去实验,学会Web开发,可能是学着学着,实验着实验着就会了。 没有人告诉你如何去做。我学习的时候,我的导师只是给了我一堆视频,一堆文档。我们从明确一个目标开始:哦,这个阶段...
引 如今,各种互联网的Web应用程序层出不穷,那么如何快速入门,成长为一个优秀的Web开发工作者呢? 这个问题不容易回答,几乎所有的培训机构都不能清晰地解答。 所以对于Web开发刚刚入门的菜鸟们,我觉得只有通过去做,去实验,学会Web开发,可能是学着学着,实验着实验着就会了。 没有人告诉你如何去做。我学习的时候,我的导师只是给了我一堆视频,一堆文档。我们从明确一个目标开始:哦,这个阶段...
阅读 1289·2023-04-25 19:33
阅读 1171·2021-10-21 09:39
阅读 3644·2021-09-09 09:32
阅读 2614·2019-08-30 10:58
阅读 1598·2019-08-29 16:17
阅读 873·2019-08-29 15:29
阅读 2885·2019-08-26 11:55
阅读 2657·2019-08-26 10:33