JavaScript------脚本化HTTP
以下:
1、HTTP:超文本传输协议;
2、Web应用架构:
Ajax (JSONP):请求服务器
Comet: 服务器推送;
3、XMLHttpRequest请求:
var requerst = new XMLHttpRequest(); //实例化
request.open(method,url);//指定请求;
//method:指定HTTP方法或动作;包括:GET POST DELETE HEAD OPTIONS PUT
//url:相对于文档的url或使用绝对路径URL,但是不能跨域;
//第三个是可选参数 默认true表示异步; false表示同步
request.setRequestHeader('Content-Type','application/json;charset=UTF-8');//设置请求头
request.onreadystatechange = function(){
if(request.readyState=== 4 || requset.status === 200){
request.getResponseHeader('Content-Type');//响应类型
request.responseText;//文本形式
request.responseXML;//Document形式
//dosomething 一般传递给回调函数
}
}//响应处理程序 顺序无所谓
request.send(body);//发送请求;此时才会启动网络,但是以上的顺序不能变;
//上传带有文件的表单数据:Content-Type需要使用multipart/form-data来POST提交;
//或(XHR2)使用FormData对象;多次使用append()放入请求参数。支持File和字符串,Blog等;
4、使用<script>发送请求JSONP:
一个根据指定url发送JSONP请求,然后把响应数据传递给回调函数的例子:
//在URL中添加一个名为jsonp的查询参数,用于指定请求的回调函数的名称
function getJSONP(url,callback){
//为请求创建一个唯一的回调函数名称
var cbnum = "cb"+getJSONP.counter++;
var cbname = "getJSONP."+cbnum ;
//使用jsonp作为参数名(有的是callback)
if(url.index('?') === -1)
url+='?jsonp=' + cbname;
else
url+='&jsonp=' + cbname;
//创建script元素用于发送请求
var script = document.createElement('script');
//回调函数执行
getJSONP[cbnum] = function(response){
try{
callback(response);
}
finally{
delete getJSONP[cbnum]; //删除函数
script.parentNode.removeChild(script);//移除元素;
}
}
script.src = url; //立即请求;
document.body.appendChlid(script); //添加到文档
}
getJSONP.counter = 0;
一个通用的例子:
var ax = function(url,method,async,data,contentType,successfn,errorfn){
data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
async = (async==null || async=="" || typeof(async)=="undefined")? true : async;
method = (method==null || method=="" || typeof(method)=="undefined")? 'GET' : method;
var request = new XMLHttpRequest();
request.open(method,url,async);
if(contentType==null || contentType=="" || typeof(contentType)=="undefined"){
//do noting 浏览器会根据参数数据自动设置
}else{
//"application/json;charset=utf-8"
requst.setRequestHeader("Content-Type",contentType);
}
//响应:
request.onreadystatechange = function(){
if(request.readyState === 4 ){
//响应完成
//获取响应类型,服务器端给的
var type = request.getResponseHeader("Content-Type");
var resp = requset.responseText;
if(type.indexOf('xml') !==-1 && requset.responseXML){
resp = requset.responseXML;
}else if(type.indexOf('json') !==-1 ){
resp = JSON.parse(resp);
}else{
//text类型 返回
}
if(request.status === 200){
//而且成功了
successfn(resp);
}else if(request.status > 399){
//但是有错误
errorfn(resp);
}
}
}
//request.overrideMimeType("application/json;charset=utf-8"); //强制响应类型为json
if(contentType.indexOf('json') !==-1 || contentType.indexOf('JSON') !==-1){
request.send(JSON.stringify(data));
}else{
request.send(data);
}
};
可根据实际情况改写;
5、服务端推送的Comet技术:使用EventSource对象,不成熟。。。。。。
JavaScript------脚本化HTTP的更多相关文章
- JavaScript权威设计--JavaScript脚本化文档Document与CSS(简要学习笔记十五)
1.Document与Element和TEXT是Node的子类. Document:树形的根部节点 Element:HTML元素的节点 TEXT:文本节点 >>HtmlElement与 ...
- javascript脚本化文档
1.getElememtById /** * 获取指定id的的元素数组 */ function getElements(/*ids...*/) { var elements = {}; for(var ...
- JavaScript 客户端JavaScript之脚本化HTTP(通过XMLHttpRequest)
XMLHttpRequest对象的设计目的是为了处理由普通文本或XML组成的响应:但是,一个响应也可能是另外一种类型,如果用户代理(UA)支持这种内容类型的话. 大多数浏览的客户端JavaScri ...
- JavaScript 客户端JavaScript之 脚本化浏览器窗口
1.计时器 客户端Javascript以全局函数setTimeOut().clearTimeOut().setInterval().clearInterval()提供这一功能. 前者是从运行的那一 ...
- JavaScript 客户端JavaScript之 脚本化文档
客户端JavaScript的存在把静态HTML转变为交互式的Web应用程序,脚本化Web页面的内容正是JavaScript存在的理由. 一个文档对象模型或者说DOM就是一个API,它定义了如何访问 ...
- Javascript学习8 - 脚本化文档(Document对象)
原文:Javascript学习8 - 脚本化文档(Document对象) 每个Web浏览器窗口(或帧)显示一个HTML文档,表示这个窗口的Window对象有一个document属性,它引用了一个Doc ...
- Javascript学习7 - 脚本化浏览器窗口
原文:Javascript学习7 - 脚本化浏览器窗口 本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...
- JavaScript权威指南--脚本化CSS
知识要点 客户端javascript程序员对CSS感兴趣的是因为样式可以通过脚本编程.脚本化css启用了一系列有趣的视觉效果.例如:可以创建动画让文档从右侧“滑入”.创造这些效果的javascript ...
- JavaScript权威指南--脚本化文档
知识要点 脚本化web页面内容是javascript的核心目标. 第13章和14章解释了每一个web浏览器窗口.标签也和框架由一个window对象所示.每个window对象有一个document对象, ...
- 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法
× 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...
随机推荐
- 二次、三次贝塞尔曲线demo(演示+获取坐标点)
二次贝塞尔曲线demo: See the Pen quadraticCurveDemo by hanyanjun (@hanyanjun) on CodePen. 我的demo地址(二次) 推荐点击以 ...
- Android开发1:基本UI界面设计——布局和组件
前言 啦啦啦~本学期要开始学习Android开发啦~ 博主在开始学习前是完完全全的小白,只有在平时完成老师要求的实验的过程中一步一步学习~从此篇博文起,博主将开始发布Android开发有关的博文,希望 ...
- Linux安全基础:配置network
在 Linux 系统中,TCP/IP 网络是通过若干个文本文件进行配置的,需要编辑这些文件来完成联网工作.系统中重要的有关网络配置文件有以下几项: /etc/sysconfig/network/etc ...
- iOS---stringByAddingPercentEscapesUsingEncoding:' is deprecated: first deprecated in iOS 9.0 - Use -stringByAddingPercentEncodingWithAllowedCharacters: instead,
旧方法 NSString *encoded = [url stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; iOS9 ...
- (转)[原] Android 自定义View 密码框 例子
遵从准则 暴露您view中所有影响可见外观的属性或者行为. 通过XML添加和设置样式 通过元素的属性来控制其外观和行为,支持和重要事件交流的事件监听器 详细步骤见:Android 自定义View步骤 ...
- Git的冲突解决过程
下面图是我总结一次提交遇到冲突解决的过程. 1. 把本地工作区的修改提交到本地仓库 2. 从远程仓库拉取代码,与本地仓库合并(pull = fetch + merge) 3. 本地仓库的代码推送回工作 ...
- [AlwaysOn Availability Groups]AG扩展事件
AG扩展事件 SQL Server 2012定义了一些关于AlwaysOn的扩展事件.你可以监控这些扩展事件来帮助诊断AG的根本问题.你也可以使用以下语句查看扩展事件: SELECT * FROM s ...
- 一则因为numa引发的mysqldump hang住
新买的dell r430服务器,双CPU,64G内存,单CPU32g,swap 3G 出现故障现像:mysqldump时会hang住,innodb_buffer_pool_size = ...
- 随手小代码——生成GUID
GUID stGUID; CString strGUID; if (S_OK==::CoCreateGuid(&stGUID)) { strGUID.Format( TEXT("{% ...
- x01.Weiqi.12: 定式布局
定式 下一步当将定式保存到数据库中,如布局中的代码所示,但其初始的代码更有利于理解.以小飞挂为例: // 0 // + 0 0 // + // // + List<Pos> P_LuSta ...