资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Javascript:ajax

Javascript:ajax

Yumenokanata / 2480人阅读

摘要：而这一技术的核心便是对象简称。一个域名的组成协议子域名主域名端口号同源策略请求类型请求用于向服务器查询某些信息。

XMLHttpRequest 
Ajax技术能向服务器请求额外的数据而无需加载页面。而这一技术的核心便是XMLHttpRequest对象(简称XHR)。
XMLHttpRequest方法 
// 创建xhr对象
var xhr = new XMLHttpRequest();
xhr.open(method,url,async) 
接收3个参数:要发送的请求的类型，请求的URL，表示是否异步发送请求的布尔值。

URL相对于当前页面(也可以使用绝对路径)

调用open()方法不会真正发送请求，而只是启动一个请求以备发送

// 初始化请求
xhr.open("get",example.php,true)

Note:只能向同一个域(子域名和主域名都得相同)使用相同端口号和协议的URL发送请求。如果URL与启动请求的页面有任何差别，都会引发安全错误。

// 一个域名的组成

协议    子域名  主域名     端口号  
http:// www.   abc.com : 8080

同源策略

请求类型
GET请求
用于向服务器查询某些信息。

可以将查询字符串参数追加到URL末尾，以便将信息发送给服务器。对XHR而言，位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。

Note:查询字符串中的每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才放到URL的末尾;而且所有名-值对都必须由和好(&)分隔。

function addURLParam ( url, name, value ) {

    url += url.indexOf("?") === -1 ? "?" : "&";
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value); 

    return url;
}
POST请求
用于向服务器发送应该被保存的信息。

POST请求应该把数据作为请求的主体提交。

PUT请求
向服务器发送想要更新的信息来替换服务上旧的信息
DELETE请求
删除服务上的信息。

Note:服务器并不会强迫执行它获得的每一个请求。如果你随意的浏览一个网站，并要求删除它的主要页面，很可能会失败

xhr.send(string) 
接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null
xhr.abort() 
取消异步请求。

调用这个方法后，xhr对象会停止触发事件

不允许xhr对象访问任何与响应有关的对象属性

xhr.setRequestHeader() 
设置自定义的头部信息。

接收两个参数:1.头部字段的名称和头部字段的值。
必须在调用send()方法之前且open()方法之后，调用此方法。

xhr.open("get", "example.php", true);
xhr.serRequestHeader("MyHeader", "MyValue");
xhr.send(null);
xhr.getResponseHeader() 
传入头部字段名称，可以取得相应的头部信息,查询响应中某个字段的值
xhr.getAllResponsHeaders() 
可以取得所有头部信息的长字符串
XMLHttpRequest属性 

/* 发送同步请求 */

// 创建xhr对象
var xhr = new XMLHttpRequest();

// 初始化请求
xhr.open("get",example.php,false);

// 发送请求
xhr.send(null);

在收到响应后，响应的数据会自动填充XHR对象的属性，相关的属性简介如下

与响应有关的xhr属性

status: 响应的HTTP状态码

statusText: HTTP状态的说明 // 跨浏览器使用不可靠

responseText: 作为响应主体被返回的文本,获得字符串形式的响应数据

responseXML: 如果响应的内容为"text/xml"或"application/xml",这个属性中将保存包含着响应数据的XML DOM文档

HTTP状态码

1XX 提示信息 - 表示请求已被成功接收，继续处理

2XX 成功 - 表示请求已被成功接收，理解，接受

3XX 重定向 - 要完成请求必须进行更进一步的处理

4XX 客户端错误 - 请求有语法错误或请求无法实现

5XX 服务器端错误 - 服务器未能实现合法的请求

/* 发送异步请求 */

// 创建xhr对象
var xhr = new XMLHttpRequest();

// 监听请求状态
xhr.onreadystatechange = function () {
    if(xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status = 304) {
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
}
 
// 初始化请求
xhr.open("get",example.php,true);

// 发送请求
xhr.send(null);
表示请求响应过程的xhr属性

readyState:

0。未初始化。尚未调用open()方法

1。服务器建立连接。已经调用open()方法，但未调用send()方法

2。请求已接收。调用send()方法，但未接收到响应

3。请求处理中。接收到部分数据响应

4。请求完成。接收到全部响应数据，可以在客户端使用了。

HTTP响应与请求体 
http—无状态协议

请求过程
1.建立TCP连接
2.Web浏览器向服务器发送请求命令
3.Web浏览器发送请求头信息
4.Web服务器应答
5.Web服务器发送应答头信息
6.Web服务器向浏览器发送数据
7.Web服务器关闭TCP连接

HTTP请求包(浏览器信息) 
Request包的结构, Request包分为3部分

第一部分叫Request line（请求行)
第二部分叫Request header（请求头）
第三部分是body（主体）。header和body之间有个空行，请求包的例子所示:

GET /domains/example/ HTTP/1.1 //请求行: 请求方法 请求URI HTTP协议/协议版本 

Host：www.iana.org //服务端的主机名 
User-Agent：Mozilla/5.0 (Windows NT 6.1)
AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4 // 浏览器信息 
Accept：text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 //客户端能接收的mine 
Accept-Encoding：gzip,deflate,sdch //是否支持流压缩
Accept-Charset：UTF-8,*;q=0.5 //客户端字符编码集 

//空行,用于分割请求头和消息体 

//消息体,请求资源参数,例如POST传递的参数
HTTP响应包(服务器信息) 
和请求包一样分为3个部分。
HTTP/1.1 200 OK                            // 状态行

Server: nginx/1.0.8                       // 服务器使用的WEB软件名及版本
Date:Date: Tue, 30 Oct 2012 04:14:25 GMT // 发送时间
Content-Type: text/html                 // 服务器发送信息的类型
Transfer-Encoding: chunked             // 表示发送HTTP包是分段发的
Connection: keep-alive                // 保持连接状态
Content-Length: 90                   // 主体内容长度

//空行 用来分割消息头和主体

FormDate

为序列化表单以及创建于表单格式相同的数据提供了便利。


var data = new FormData();
data.append("name","Nicholas");


跨资源共享

CORS(Cross-Origin Resource Sharing, 跨资源共享):定义了在必须访问跨源资源时，浏览器与服务器如何沟通。


基本思想:使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是应该失败。

IE对CORS的实现


cookie不会随请求发送，也不会随响应返回


只能设置请求头部信息中的Conte-type字段


不能访问响应头部信息


只支持GET和POST请求


其他浏览器对CORS的实现


不能使用setRequestHeader()设置自定义头部


不能发送和接收cookie


调用getAllResponseHeaders()方法总会返回空字符串


Comet

一种服务器向页面推送数据的技术。


实现方式:



长轮询


HTTP流


长轮询

首先轮询的意思就是,浏览器定时向服务器发送请求,看有没有更新的数据。


短轮询(也就是传统轮询)：浏览器定时向服务器发送请求，与服务器建立
长轮询:

HTTP流

在页面的整个周期内，只使用一个HTTP连接。


具体来说，就是浏览器向服务器发送一个请求，而服务器保持连接打开
云服务器 GPU云服务器 javascript+ajax

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79091.html

相关文章

  • JavaScript 异步机制及应用 入门教程

    摘要：异步与同步技术研究概念介绍异步简写同步简写用比方来比喻异步就是个人同时起跑起点和出发时间相同在起跑时不去关心其他人会啥时候跑完尼玛这不废话吗大家都才起跑怎么知道别人多就跑完同步就是个人接力跑起点和出发时间不同且后一个人会等待前一个人跑完才能 1. 异步与同步 技术研究 (1). 概念介绍 异步: asynchronous 简写async 同步: synchronous 简写syn...

    BoYang 评论0 收藏0

  • Ajax笔记

    摘要：本文主要是我学习的笔记，不涉及到原理，只是记录如何使用。成功的含义取决于方法资源已被提取并在消息正文中传输。是请求链接到服务器，服务器响应错误后服务器返回浏览器的状态码。是指响应时间，开始请求到接收到响应开始处理的时间，单位为。 本文主要是我学习ajax的笔记，不涉及到原理，只是记录如何使用。如果有错欢迎各位大佬指出。提前先转一篇写的非常全面的博客你真的会使用XMLHttpReques...

    macg0406 评论0 收藏0

  • JavaScript Ajax与Comet——“进度事件”的注意要点

    摘要：有以下个进度事件在接收到响应数据的第一个字节时触发。在接收响应数据期间持续的触发在请求发生错误时触发在因调用方法而终止连接时触发在接收到完整的响应数据时触发在通信完成或者触发，，事件后触发。 有以下6个进度事件： loadstart: 在接收到响应数据的第一个字节时触发。 progress: 在接收响应数据期间持续的触发 error: 在请求发生错误时触发 abort: 在因调用ab...

    ad6623 评论0 收藏0

  • JavaScript Ajax与Comet——“XMLHttpRequest2级”的注意要点

    摘要：并非所有的浏览器都完整的实现了级的规范，但是所有的浏览器都实现了它部分的规范。超时设定唯一支持的超时设定事件，对象的事件。方法用于重写响应的类型。它能强迫服务器返回的数据类型给些为本方法提供的类型。 并非所有的浏览器都完整的实现了XMLHttpRequest 2 级的规范， 但是所有的浏览器都实现了它部分的规范。 FormData FormData类型 append()向其添加数据，...

    melody_lql 评论0 收藏0

  • JavaScript Ajax与Comet——“跨源资源共享”的注意要点

    摘要：注意请求和响应都不包含信息。对象的安全机制部分实现了的规范。请求返回后会触发事件，响应数据保存在属性中。无论是同源请求还是跨域请求，对于本地资源最好使用相对，在访问远程资源时再使用绝对。发送请求之后，服务器决定是否允许这种类型的请求。 通过XHR实现Ajax通信的一个主要限制，来源于跨域安全策略。在默认情况下，Ajax只能访问与包含它的页面位于同一个域中的资源。但是有时也需要一些跨域的...

    haobowd 评论0 收藏0

  • JavaScript Ajax与Comet——“XMLHttpRequest对象”的注意要点

    摘要：在中，对象是通过库中的对象实现的。可以检测对象的属性，该属性表示请求响应过程的当前活动阶段。已经调用但尚未接收到响应接收。由于内存原因，不建议重用对象。头部信息对象提供了操作请求头部和响应头部信息的方法。建议使用自定义的头部名称。 在IE5中，XHR对象是通过MSXML库中的ActiveX对象实现的。在IE中可能会遇到三种不同版本的XHR对象，即MSXML2.XMLHttp、MSXML...

    Martin91 评论0 收藏0

发表评论

登陆后可评论

0条评论

Yumenokanata

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<