JavaScript权威设计--跨域,XMLHttpRequest(简要学习笔记十九)

简介:
1.跨域指的是什么?
 
2.Comet与Ajax
 
3.XMLHttpRequest
除了GET与POST之外,XMLHttpRequest规范也允许第一个参数为 DELETE,HEAD,OPTIONS,PUT。
如果有请求头的话,需要设置它。
如:POST请求需要“Content-Type”头指定请求主题的MIME类型。
request.setRequestHeader("Content-Type","text/plain");
 
 
POST发送:

4.为了在响应准备就绪得到通知,必须监听XMLHttpRequest对象上的readystatechange事件。
readyState是一个整数,它指定了HTTP请求的状态。
 
 
 
下面是一个异步响应。
 
 
 
下面是一个同步响应:
 
 
 
5.<script>元素可以发起跨域请求。而XMLHttpRequest API不可以。
我们可以通过检查头文件类型来判断响应的数据类型。
var type=request.getResponseHeader("Content-Type");
if(type.indexOf("xml")!==-1 && request.responseXML){
    callback(request.responseXML);    //Document对象响应
}else if(type==="application/json"){
     callback(JSON.parse(request.responseText));    //JSON响应
}

 

6.multipart/form-data
当HTML表单同事包含文件上传元素和其他元素时,浏览器不能使用普通的表单编码,
必须使用“multipart/form-data”的特殊Content-Type来用POST方法提交表单。
 
 
7.文件上传
js:
复制代码
window.onload=function(){
var a=document.getElementById("dd");
a.addEventListener("change",function(){
alert(this.files)   //返回一个FileList
    },false)

}
复制代码

 
 
 
8.HTTP进度事件
HTTP请求超时,触发 timeout事件
HTTP请求中止,触发 abort事件
HTTP太多重定向的网络错误会阻止请求完成,触发 error事件
 
与progress事件相关的其他三个属性:
loaded:目前传输的字节数值
total:头传输的数据的整体长度
lengthCopmputable:如果知道内容长度,为true
例子:
request.onprogress=function(e){
    if(e.lengthCopmputable){
        progress.innerHTML=Math.round(100*e.loaded/e.total)+"%完毕!";
    }
}
 
9.CORS(跨域资源共享)
 
10.使用EventSource创建简单聊天客户端
 
 转载:http://www.cnblogs.com/zqzjs/p/4883955.html
目录
相关文章
|
13天前
|
JSON JavaScript 前端开发
【JavaScript技术专栏】JavaScript的跨域通信方法
【4月更文挑战第30天】本文探讨了JavaScript中的跨域通信方法,包括:同源策略和跨域通信的概念,以及JSONP、CORS、WebSockets、`window.postMessage()`、代理服务器和WebAssembly的使用。这些技术各有优劣,适用于不同的场景,是Web开发者解决跨域问题的关键工具。随着Web技术的演进,跨域通信的解决方案也将不断更新。
|
19天前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
19 0
webgl学习笔记3_javascript的HTML DOM
|
19天前
|
JavaScript 前端开发 Java
webgl学习笔记2_javascript基础快速学习
webgl学习笔记2_javascript基础快速学习
19 0
|
22天前
|
JavaScript 前端开发 安全
JavaScript中跨域资源共享(CORS):原理和解决方案
【4月更文挑战第22天】本文介绍了JavaScript中跨域资源共享(CORS)的原理和解决方案。CORS借助HTTP头部字段允许跨域请求,核心是Access-Control-Allow-Origin响应头。解决方案包括:服务器端设置响应头(如使用Express.js的cors中间件)、使用代理服务器或JSONP。现代Web开发推荐使用CORS,因为它更安全、灵活,而JSONP已逐渐被淘汰。理解并正确实施CORS能提升Web应用性能和安全性。
|
5月前
|
JavaScript 索引
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
|
2月前
|
JavaScript 安全 前端开发
js开发:请解释什么是跨域请求(CORS),以及如何解决跨域问题。
CORS是一种W3C标准,用于解决浏览器同源策略导致的跨域数据访问限制。它通过服务器在HTTP响应头添加标志允许特定源进行跨域请求。简单请求无需预检,而预检请求(OPTIONS)用于询问服务器是否接受非简单请求。服务器端配置响应头如`Access-Control-Allow-Origin`等实现CORS策略,客户端JavaScript则正常发起请求。若配置不当,浏览器将阻止跨域访问,保障安全。
25 2
|
3月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
4月前
|
存储 JavaScript
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
24 0
|
5月前
|
前端开发 JavaScript 安全
JavaScript高级主题:什么是跨域资源共享(CORS)?
JavaScript高级主题:什么是跨域资源共享(CORS)?
41 0
|
5月前
|
JSON JavaScript 前端开发
JS解决跨域问题
JS解决跨域问题
39 0