脚本化HTTP
2017-04-11 08:46:24 0 举报AI智能生成
JavaScript权威指南--脚本化HTTP
作者其他创作
大纲/内容
1.使用XMLHttpRequest
1.指定请求
创建XMLHttpRequest对象之后，发起HTTP请求下一步是调用XMLHttpRequest对象的open()方法去指定这个请求的两个必须部分：方法和URL
open()方法
第一个参数不区分大小写，
但通常使用大写来匹配HTTP协议
但通常使用大写来匹配HTTP协议
“GET”
适用于当URL完全指定请求资源，
当请求对服务器没有任何副作用
以及当服务器响应是可缓存时
当请求对服务器没有任何副作用
以及当服务器响应是可缓存时
“POST”
常用于HTML表单
它在请求主体中包含额外数据（表单数据），
且这些数据常存储到服务器上的数据库中（副作用）
且这些数据常存储到服务器上的数据库中（副作用）
相同URL地重复“POST”请求从服务器得到的响应可能不同，
同时不应该缓存使用这个方法的请求。
同时不应该缓存使用这个方法的请求。
"DELETE","HEAD","OPTIONS"和"PUT"：旧浏览器并不支持这所有方法
URL:请求的主题
这是相对于文档的URL，这个文档包含调用open()的脚本
如果指定绝对URL、协议、主机和端口通常必须匹配所在文档的对应内容：跨域请求通常会报错
如果有请求头的话，请求进程的下个步是设置它
POST请求需要“Content-Type”头指定请求主题的MIME类型：
request.setRequestHeader("Content-Type", "text/plain")
request.setRequestHeader("Content-Type", "text/plain")
如果相同的头调用setRequestHeader()多次，新值取代，相反，
HTTP请求将包含这个头的多个副本或这个头将指定多个值。
HTTP请求将包含这个头的多个副本或这个头将指定多个值。
有些头不能自己指定：见下表
如果请求一个受密码保护的URL，把用户名和密码作为第4个和第5个参数传递给open()，
则XMLHttpRequest将设置合适的头
则XMLHttpRequest将设置合适的头
使用XMLHttpRequest发起HTTP请求的最后一步是指定可选的请求主体并向服务器发送它，使用send()方法
send()方法
GET请求绝对没有主体，所有应该传递null或省略这个参数
POST请求通常拥有主体，同时它应该匹配使用setRequestHeader()指定的“Content-Type”头
示例：用POST方法发送文本字符串给服务器,并忽略服务器返回的任何响应
2.取得响应
一个完整的HTTP响应由状态码、响应头集合和响应主体组成。
这些都可以通过XMLHTTPRequest对象的属性和方法使用
这些都可以通过XMLHTTPRequest对象的属性和方法使用
status和statusText属性以数字和文本的形式返回HTTP状态码
使用getResponseHeader()和getAllResponseHeaders()能查询响应头。见下
响应主体可以从responseText属性中得到文本形式的，从responseXML属性得到Document形式的
XMLHttpRequest对象通常异步使用：需要监听事件的触发。见下
发送请求后，send()方法立即返回，直到响应返回，前面列出的响应方法和属性才有效
readyState属性
是一个整数，它指定了HTTP请求的状态。见下表
理论上，每次readState属性改变都会触发readystatechange事件。实际上当reayState改变为0或1时可能没触发这个事件
当调用send()时，即使reayState仍处于OPEN状态，也通常触发readystatechange事件。
某些浏览器在LOADING状态是能够触发多次事件来给出进度反馈
当readyState值改变为4或服务器响应完成时，所有的浏览器都能触发readystatechange事件
readystatechange事件
为了监听readystatechange事件，请把事件处理函数设置为xmlhttprequest对象的onreadystatechange属性
也能使用addEventListener()（在IE8之前版本中使用attachEvent()），但通常每个请求只需求一个处理程序，所以只设置onreadystatechange更容易
示例：getText()函数，演示如何监听reaystatechange事件
同步响应
由于其本身的性质，异步处理HTTP响应是最好的方式。然而，XMLHttpRequest也支持同步响应
把false作为第三个参数传给open()，那么send()方法将阻塞直到请求完成
事件处理程序：一旦send()返回，仅需要检查XMLHttpRequest对象的status和responseText属性
示例：getText()函数同步代码
同步请求是吸引人的，但应该避免使用它们。客户端javascript是单线程的，当send()方法阻塞时，它通常导致整个浏览器UI冻结。如果连接的服务器响应慢，那么用户的浏览器冻结
响应解码
服务器器使用像“text/plain”、“text/html”、或“text/css”这样的MIME类型发送文本响应，我们使用XMLHTTPRequest对象的reponseText属性到它
如果服务器发送XML或XHTML文档作为其响应，你能通过responseXML属性获得一个解析形式的XML文档。这个属性的值是一个Document对象
如果服务器想发送诸如对象或数组这样的结构化数据作为其响应，它应该传输JSON编码（6.9节）的字符串数据。当接受它时，可以把responseText属性传给JSOP.parse()
示例：上面的一个例子的归纳：它实现指定URL的GET请求并当URL的内容准备就绪时把他们传递给指定的回调函数
服务器响应的正常解码是假设服务器为这个响应发送了"Content-Type"头和正确的MIME类型
3.编码请求主体
HTTP POST请求包含一个请求主体，它包含客户端传递给服务器的数据。在例18-1中，请求主体是简单的文本字符串，但是我们通常使用HTTP请求发送的都是更复杂的数据
1.表单编码的请求
见下
2.JSON编码的请求
在POST请求主体中使用表单编码是常见惯例，但在任何情况下它都不是HTTP协议的必需品。近年来，作为web交换格式的JSON已经得到普及
示例：展示了如何使用JSON.stringfy()（参见6.9节）编码主体。跟例18-5差最后两行
3.XML编码的请求
XML有时候也用于数据传输的编码
在目前展示的例子中，XMLHttpRequest的send()方法的参数是一个字符串或null。实际上，这里可以传入XML Document对象
示例：展示如何创建一个简单的XML Document对象并使用它作为HTTP请求的主体
4.上传文件
HTML表单的特性之一是当用户通过<input type="file">元素选择文件时，表单将在它产生的POST请求主题中发生文件内容
HTML表单始终能上传文件，但到目前为止，还不能使用XMLHttpRequest API做相同的事情。然后XHR2允许向send()方法传入File对象来实现上传文件。
没有File()对象构造函数，脚本仅能获得表示用户当前选择的的File对象
示例：对某些文件上传元素添加了change事件处理程序，这样他们能自动把任何选择过的文件内容通过POST方法发送到指定的URL
详情在22章
5.multipart/form-data请求
当HTML表单同时包含上传元素和其他元素时，浏览器不能使用普通的表单码而必须使用称为"multipart/form-data"的特殊Content-type来用POST方法提交表单
这种编码包括使用长“边界”字符串把请求的主体分离成多个部分
XHR2定义了新的FormData API，它容易实现多部分请求主体
首先，使用FormData()构造函数创建FormData对象
然后按需调用这个对象的append()方法把个体的
“部分”（可以是字符串，File,或Blob对象）添加到请求中
“部分”（可以是字符串，File,或Blob对象）添加到请求中
最后，把FormData对象传递给send()方法。send()方法将对
请求定义合适的边界字符串和设置“Content-Type”头
请求定义合适的边界字符串和设置“Content-Type”头
示例：使用POST方法发送multipart/form-data请求主体
4.HTTP进度事件
这个新的事件模型中，XMLHttpRequest对象在请求的不同阶段触发不同的事件，所以它不再需要检查reayState属性
loadstart、progress、load、timeout、abort、error等事件
上传进度事件
示例：监控HTTP上传进度
5.中止请求和超时
可以通过调用XMLHTTPRequest对象的
abort()方法来取消正在进行的HTTP请求
abort()方法来取消正在进行的HTTP请求
调用abort()方法在这个对象上触发abort事件（可通过XMLHTTPRequest对象的"onabort"属性是否存在来判断）
调用abort()的主要原因是完成取消或超时请求消耗的时间太长或当响应变得无关时
比如：假设使用XMLHttpRequest为文本输入域请求自动完成推荐。
如果用户在服务器的建议达到之前输入了新字符，这时等待请求不再有趣，应该中止。
如果用户在服务器的建议达到之前输入了新字符，这时等待请求不再有趣，应该中止。
示例：可以用setTimeout()和abort()方法实现自己的超时
6.跨域HTTP请求
作为同源策略的一部分，XMLHTTPRequest对象通常仅跨域发起和文档具有相同服务器的HTTP请求。
使用XMLHttpRequest，文档内容都是通过responseText属性暴露，所有同源策略不允许XMLHTTPRequest进行跨域请求。
使用XMLHttpRequest，文档内容都是通过responseText属性暴露，所有同源策略不允许XMLHTTPRequest进行跨域请求。
XHR2通过HTTP响应中选择发送合适的CORS（跨域资源共享cross origin resoure sharing）允许跨域访问网站
使用这个功能不需要其他额外工作
CORS的一些安全细节
如果给XMLHttpRequest的open()方法传入用户名和密码，那么它们绝对不会通过跨域请求发送（这使得分布式密码攻击称为可能）
跨域请求通常也不会包含其它任何用户证书：cookie和HTTP身份验证令牌（token）通常也不会作为请求的内容部分发送且作为跨域响应来接收的cookie都会丢弃
如果跨域请求需要这几张凭证才能够成功，那么必须在用send()发送请求钱设置XMLHttpRequest的withCredentials属性为true。这样做不常见，但测试withCredentials的存在性是测试浏览器是否支持CORS的一种反方法
示例：使用HEAD和CORS请求链接详细信息
2.借用<script>发送HTTP请求：JOSNP
用<script>元素作为一种ajax传输机制
一个主要原因是，它不受同源策略的影响，因此可以使用它们从其它的服务器请求数据。第二个原因是包含JSON编码数据的响应体会自动解码（即，执行）
这项技术称为JSONP。若HTTP请求所得到的响应数据是经过json编码的，则适合使用该技术。P代表“填充”或“前缀”
3.基于服务器推送的Comet技术
在服务器端推送事件的标准草案中定义一个EventSource对象，简化Comet应用程序的编写可以传递一个URL给EventSource()构造函数，然后在返回的实例上监听消息事件。
服务器推送事件的协议很简单：客户端(创建一个EventSourse对象时会)建立一个到服务器的连接，服务器保持这个连接处于打开状态
0 条评论
下一页
