ajax _ Power Node Java学院整理介绍

AJAX不是JavaScript的标准，而是“发明”的缩写：异步JavaScript和XML，意思是用JavaScript执行异步网络请求。

如果你仔细观察一个表单的提交，你会发现一旦用户点击“提交”按钮，表单就会开始提交，浏览器会刷新页面，然后在新页面告诉你操作是成功还是失败。不幸的是，如果网络太慢或其他原因，你会得到一个404页。

网络就是这样工作的：一个HTTP请求对应一个页面。

如果你想让用户停留在当前页面，同时发送一个新的HTTP请求，你必须用JavaScript发送这个新的请求，然后在收到数据后用JavaScript更新页面。这样，用户感觉自己还在当前页面上，但数据可以不断更新。

Gmail是第一个大规模使用AJAX的。Gmail的页面第一次加载后，剩下的所有数据都要靠AJAX来更新。

用JavaScript编写完整的AJAX代码并不复杂，但需要注意的是，AJAX请求是异步执行的，也就是通过回调函数获得响应。在现代浏览器中编写AJAX主要依赖于XMLHttpRequest对象：

函数成功(文本){ var textarea=document . getelementbyid(' test-response-text ')；textarea.value=text}函数失败(代码){ var textarea=document . getelementbyid(' test-response-text ')；textarea.value='错误代码： '代码；}var请求=new XMlhttprequest()；//创建一个新的XMLHttpRequest对象request . onreadystatechange=function(){//当状态发生变化时，函数被回调if (request.readyState===4) {//成功完成//响应结果： if (request。status==200){//成功，responseText :返回成功(请求。responsetext)是通过responsetext获得的；} else {//失败。根据响应代码，判断失败原因：返回失败(request.status)。}} else {//HTTP请求仍在进行.} }//发送请求：request.open ('get '，'/API/categories ')；request . send()；警报('请求已发送，请等待响应.');对于较低版本的IE，您需要更改一个活动对象：

函数成功(文本){ var textarea=document . getelementbyid(' test-ie-response-text ')；textarea.value=text}函数失败(代码){ var textarea=document . getelementbyid(' test-ie-response-text ')；textarea.value='错误代码： '代码；} var request=new ActiveX object(' Microsoft。XMLHTTP’)；//创建一个新的微软。XMLHTTP对象request . onreadystatechange=function(){//当状态发生变化时，函数被回调if (request.readyState===4) {//成功完成//响应结果： if (request。status==200){//成功，responseText :返回成功(请求。responsetext)是通过responsetext获得的；} else {//失败。根据响应代码，判断失败原因：返回失败(request.status)。}} else {//HTTP请求仍在进行.} }//发送请求：request.open ('get '，'/API/categories ')；request . send()；警报('请求已发送，请等待响应.');如果你想混合标准写作和IE写作，你可以这样写：

var请求；if(窗口。XMLHttpRequest){ request=new XMLHttpRequest()；} else { request=new ActiveX object(' Microsoft。XMLHTTP’)；}通过检测窗口对象是否具有XMLHttpRequest属性，确定浏览器是否支持标准的XMLHttpRequest。注意，不要根据浏览器的navigator.userAgent来检查浏览器是否支持某个JavaScript特性，因为字符串本身是可以伪造的，用IE版本来判断JavaScript特性会非常复杂。

在创建了XMLHttpRequest对象之后，应该首先设置onreadystatechange的回调函数。在回调函数中，我们通常只需要通过readyState===4来判断请求是否完成，然后根据status===200来判断是否是成功响应。XMLHttpRequest对象的open()方法有三个参数。第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步。默认值为true，所以没有必要写。

注意不要将false指定为第三个参数，否则浏览器将停止响应，直到AJAX请求完成。如果这个请求需要10秒，你会发现浏览器在10秒内处于“假死”状态。

最后，调用send()方法发送请求。GET请求不需要参数，POST请求需要以字符串或FormData对象的形式传入主体部分。

安全限制

上述代码的网址使用相对路径。如果您将其更改为“http://www.sina.com.cn/'”并再次运行，您肯定会报告错误。在Chrome的控制台中，您还可以看到错误消息。

这是浏览器的同源策略造成的。默认情况下，当JavaScript发送AJAX请求时，URL的域名必须与当前页面完全相同。

完全相同意味着域名应该相同(www.example.com和example.com不同)，协议应该相同(http和https不同)，端口号应该相同(默认为：80端口，与：8080不同)。有些浏览器比较宽松，允许不同的端口。大多数浏览器都会严格遵守这个限制。

用JavaScript请求外域(也就是其他网站)的URL是不可能的吗？有一些方法，大概有几种：

第一种是通过Flash插件发送HTTP请求，可以绕过浏览器的安全限制，但必须安装Flash并与Flash交互。但是Flash使用起来比较麻烦，现在用的越来越少了。

二是通过在同一个域名下设置代理服务器转发，JavaScript负责将请求发送到代理服务器：'/proxy？Url=http://www.sina.com.cn '代理服务器再次返回结果，从而符合浏览器的同源策略。这种方法的问题在于它需要在服务器端进行额外的开发。

第三种方法叫做JSONP，它有一个限制，就是只能使用GET请求，需要返回JavaScript。这样，跨域实际上利用了浏览器允许跨域引用JavaScript资源：

Html标题脚本src=' http:http://example.com/abc.js'/script./流浆池./body/htmljsonp通常以函数调用的形式返回，例如，返回的JavaScript内容如下：foo(' data ')；这样，如果我们先在页面中准备foo()函数，然后在页面中动态添加一个脚本节点，就相当于动态读取外域中的JavaScript资源，最后等待接收回调。

以163的股票查询URL为例。对于URL:http://api.money.126.net/data/feed/0000001,1399001?回调=refreshPrice，您将获得以下返回：refreshprice ({'000001' : { '代码' :' 000001 '，});

所以我们需要首先在页面中准备回调函数：

函数refresh price(data){ var p=document . getelementbyid(' test-jsonp ')；P.innerHTML='当前价格：'数据['000001']。name' : '数据['000001']。价格'；'数据['1399001']。name ': ' data['1399001']。价格；}最后，用getPrice()函数触发：

函数getPrice(){ var js=document . createelement(' script ')，head=document . getelementsbytagname(' head ')[0]；js . src=' http://API . money . 126 . net/data/feed/0000001，1399001？回调=refresh price '；head . appendchild(js)；}完成数据的跨域加载。

克-奥二氏分级量表

如果浏览器支持HTML5，可以使用新的跨域策略：CORS一劳永逸。

CORS的全称是跨来源资源共享，即如何跨HTML5规范定义的域访问资源。

在我们理解CORS之前，我们应该首先理解这个概念：

Origin表示这个域，即浏览器当前页面的域。当JavaScript向外域(如新浪网)发送请求时，浏览器收到响应后，首先检查访问控制允许源是否包含该域。如果是，则跨域请求成功；如果没有，则请求失败，JavaScript无法获得响应的任何数据。

用一个数字来表示就是：

假设本地域是my.com，外域是Sina.com，只要响应头“访问控制-允许-源”是http://my.com或*，该请求就可以成功。

可以看出，跨域的成功取决于对方服务器是否愿意为你设置一个正确的访问控制允许源，决定权始终在对方服务器手中。

上述跨域请求称为“简单请求”。简单的请求包括GET、HEAD和POST(Content-Type类型POST(POST仅限于application/x-www-form-URL encoded、multipart/form-data和text/plain)，不能出现用户自定义的HEAD(例如x-custom3360 12345)，通常满足90%的要求。

无论您是否需要使用JavaScript通过CORS请求跨域资源，您都应该了解CORS的原则。最新的浏览器完全支持HTML5。除了JavaScript和CSS之外，参考国外资源的时候也要验证CORS。例如，当您引用第三方CDN上的字体文件时：

/* CSS */@ font-face { font-family : ' font awesome '；src : URL(' http://cdn.com/font/font awesome . TTF ')格式(' truetype ')；}如果CDN服务提供商没有正确设置Access-Control-Allow-Origin，则浏览器无法加载字体资源。对于PUT、DELETE和其他POST请求，比如application/json，在发送AJAX请求之前，浏览器会向这个URL发送一个OPTIONS请求(称为preflighted request)。询问目标服务器是否接受：options/path/to/resource http/1.1 host : bar.com origin 3360 http://my.com访问-控制-请求-方法：post。

服务器必须响应并明确指出允许的方法：http/1.1 200 ok access-control-allow-origin : http://my.com access-control-allow-methods : post、get、put、options access-control-max-age : 86400

只有当浏览器确认服务器响应的访问控制允许方法头包含要发送的AJAX请求的方法时，才会继续发送AJAX；否则，将引发错误。

因为在REST中以POST和PUT的形式传输JSON数据是很常见的，所以服务器必须正确地响应OPTIONS请求，以便正确地处理跨域的POST和PUT请求。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。