javascript权威指南第21章 Ajax和Comet
function createXHR(){
if(typeof XMLHttpRequest !='undefined'){
return new XMLHttpRequest();
}else if(typeof ActiveXObject!='undefined'){ if(typeof arguments.callee.ActiveXString!='string'){ var versions =['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp'],i,len; for(i=0,len=versions.length;i<len;i++){
try {
//判断是否能成功创建当前版本的ActiveObject
new ActiveXObject(versions[i]);
arguments.callee.ActiveXString =versions[i]; //如果能设置当前对象的参数
break;
} catch (error) {
//跳过
}
}
}
return new ActiveXObject(arguments.callee.ActiveXString); //根据当前函数的参数创建ActiveXObject
}
else{
throw new Error('No XHR object avilable.');
}
} //创建 xhr var xhr = createXHR(); xhr.onreadyStatechange =function(){
if(xhr.readySate ==4){
if(xhr.status>=200 && xhr.status<300|| xhr.status==304){
var responseText = xhr.responseText;
}else{
//请求未正常得到结果
alert('Request was unsuccessful:'+xhr.status);
}
}
}
xhr.open('get','example.php',false); // 参数 get/post url async
xhr.send(null); //send接收请求主体发送的数据,如果get 可以设置成null
xhr.abort(); //取消请求 //21.1.2 HTTP头部信息 xhr.setRequestHeader('MyHeader','MyValue'); //设置请求头信息 //post 提交
xhr.open('post','url',true);
var form = document.getElementById('user-info');
xhr.send(serialize(form)); //序列化form表单数据并且提交表单 //21.2.1 FormData
//为优化post 提交xmlhttprequest定义了FormData
var data =new FormData();
data.append('name','Nicholas');
xhr.send(data); var form =document.getElementById('user-info');
xhr.send(new FormData(form)); //21.2.2 超时设定
xhr.timeout =1000; //设置1秒
xhr.ontimeout =function(){
alert('Request did not return in a second');
} //21.2.3 overrideMimeType() 方法
xhr.overrideMimeType('text/xml'); //强迫请求对象将响应当着XML而非纯文本处理 //21.3 进度事件 //loadstart 在接收到响应数据的第一个字节触发
//progress 在接收响应期间持续不断触发
//error 在请求发生错误时触发。
//abort 在因为调用abort() 方法而终止链接时触发
//load 在接收到完整的响应数据时触发
//loadend 在通信完成或触发 error abort 或 load 事件后触发 xhr.onload =function(){ }
xhr.onprogress =function(){ } //21.4 跨源资源共享 //跨域安全是服务端设置的,并非请求端可以设置跨域
//Access-Control-Allow-Origin:http://www.nczonline.net
//如果服务端认可这个请求源,则在头部中回发相同的源信息 或者可以回发 Access-Control-Allow-Origin:"*" //21.4.1 IE对CORS的实现 var xdr = new XDomainRequest(); //21.4.3 Preflighted Requests
//通过设置请求头信息让服务端判定是否支持该请求
// Access-Control-Allow-Origin:http://www.nczonline.net
// Access-Control-Allow-Methods:POST,GET
// Access-Control-Allow-Headers:NCZ
// Access-Control-Allow-Age:1728000 //21.4.4 带凭据的请求
//Access-Control-Allow-Crendentials:true //21.5 其他跨域技术
//21.5.1 图像ping
var img =new Image();
img.onload =img.onerror =function(){
alert('Done!');
}
img.src ='http://www.example.com/text?name=Nicholas'; //21.5.2 JSONP
//通过脚本加载方式实现跨域,因为script与img 类似都可以不受跨域限制
//<script src='http://localhost:9090/student?callback=showData'><\/script>
//服务端返回 showData({name:'mas'}); //构建一个 JSONP 格式的函数执行体,回到客户端就会执行客户端showData函数实现跨域 //21.5.3 Comet //参看示例 https://www.iteye.com/blog/raising-2271869 //21.5.4 服务器发送事件 var source = new EventSource('url');
source.open();
source.onmessage =function(event){
var data = event.data;
};
source.close(); // 21.5.5 Web Sockets var socket = new WebSocket('ws://www.example.com/server.php');
// 实例化WebSocket对象后,浏览器就会马上尝试建立链接,websocket也有一个代表当前状态的
// readyState 属性 属性值分别为 WebSocket.OPENING(0) 正在建立链接
//WebSocket.OPEN(1) 已经建立链接
//WebSocket.CLOSEING(2) 正在关闭链接
//WebSocket.CLOSE(3) 已经关闭连接 socket.send('hello world!');
var message ={
time:new Date(),
text:"Hello World!",
clientId:'asdfp8734rew'
};
socket.send(JSON.stringify(message));
//从服务端接收消息
socket.onmessage =function(event){
var data = event.data;
//处理逻辑
}; socket.onopen =function(event){ };
socket.onerror =function(event){ };
socket.onclose =function(event){
//onclose事件三个特有属性
//event.wasClean(boolean值,表示是否已经关闭)
// event.code(服务器返回的数值状态码)
// event.reason (服务器返回的消息)
}
javascript权威指南第21章 Ajax和Comet的更多相关文章
- javascript权威指南第11章 DOM扩展
//javascript 权威指南 第三版 第11章 DOM扩展 //取得body元素 var body = document.querySelector("body"); //取 ...
- 【笔记】javascript权威指南-第六章-对象
对象 //本书是指:javascript权威指南 //以下内容摘记时间为:2013.7.28 对象的定义: 1.对象是一种复合值:将很多值(原始值或者对象)聚合在一起,可以通过名字访问这些值. ...
- 【笔记】javascript权威指南-第三章-类型,值和变量
javascript中的原始类型和对象类型(基本类型和引用类型) //本书是指:javascript权威指南 //以下内容摘记时间为:2013.7.27 计算机程序运行时需要对值(value ...
- javascript权威指南第22章高级技巧
HTML <!DOCTYPE html> <html> <head> </head> <body> <div style=" ...
- javascript权威指南第16章 HTML5脚本编程
<!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...
- javascript权威指南第13章 事件示例代码
html 部分 <!DOCTYPE html> <html> <head> <title>Event Bubling Example</title ...
- 《javascript高级程序设计》第21章 Ajax和Comet
21.1 XMLHttpRequest 对象 The XMLHttpRequest Object 21.1.1 XHR 的用法 XHR Usage 21.1.2 HTTP 头部信息 XHR Head ...
- JavaScript权威指南--第3章 类型、值和变量
在编程语言中,能够表示并操作的值(value)的类型称作数据类型(type).使用变量来储存值.JavaScript中数据类型有两种:原始类型(primitive type/基本数据类型)和对象类型( ...
- JavaScript权威指南第02章 词法结构
词法结构 2.1字符集 JavaScript 是Unicode字符集编写,差点儿支持地球上全部的语言. 2.1.1区分大写和小写 javascript是区分大写和小写的语言. 2.1.2 空格.换行符 ...
随机推荐
- 将oracle关键字作为字段名
对于关键字比如:Level.uid.group等 如果在数据库设计的时候,没有考虑oracle数据库的特殊性时,可能会使用关键字作为字段名,从而在建表的过程中,提示错误:ORA-00904: inva ...
- 剑指offer59:按之字形顺序打印二叉树:[[1], [3,2], [4,5,6,7]]
1 题目描述 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. 2 思路和方法 先给定一个二叉树的样式: ...
- 初始NLTK
NLTK官网:链接 Natural Language Toolkit NLTK corpora and lexical resources such as WordNet, along with a ...
- Spring Boot集成Spring Data Jpa完整实例
步骤: 添加依赖: 配置文件: 出了数据库的配置,还要配置jpa相关的: 实体类: Dao接口: 定义一个查询的方法,如果是jpa默认就有也可以不写: 测试: 如果报下面的错误,说明jdk9中缺少相关 ...
- ASCII,UTF-8,Unicode字符串相互转换
#include<string> #include<windows.h> #include<vector> using namespace std; //utf8 ...
- vue的交互
交互 Vue做交互需要引入一个库:vue-resouce.js get: post jsonp <script src="vue.js" ...
- SEO运用meta标签进行网站优化
SEO定义 Search Engine Optimization 搜索引擎优化 一,常用的HTTP-EQUIV类型: Set-Cookie(cookie设定) 说明:如果网页过期,存盘的cookie将 ...
- React Native 开发豆瓣评分(一)环境搭建&配置模拟器
详细可参考 官方文档,这里进记录一些重要过程. 安装环境 下载 Android Studio 选择 Custom 进行安装: Android SDK Android SDK Platform Perf ...
- pandas 25 式
英文版 Jupyter Notebook 链接:https://nbviewer.jupyter.org/github/justmarkham/pandas-videos/blob/master/to ...
- 关于get 和post 方法的比较
地址:https://my.oschina.net/leejun2005/blog/136820 点击这里