以下:

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的更多相关文章

  1. JavaScript权威设计--JavaScript脚本化文档Document与CSS(简要学习笔记十五)

    1.Document与Element和TEXT是Node的子类. Document:树形的根部节点 Element:HTML元素的节点 TEXT:文本节点   >>HtmlElement与 ...

  2. javascript脚本化文档

    1.getElememtById /** * 获取指定id的的元素数组 */ function getElements(/*ids...*/) { var elements = {}; for(var ...

  3. JavaScript 客户端JavaScript之脚本化HTTP(通过XMLHttpRequest)

    XMLHttpRequest对象的设计目的是为了处理由普通文本或XML组成的响应:但是,一个响应也可能是另外一种类型,如果用户代理(UA)支持这种内容类型的话.   大多数浏览的客户端JavaScri ...

  4. JavaScript 客户端JavaScript之 脚本化浏览器窗口

    1.计时器 客户端Javascript以全局函数setTimeOut().clearTimeOut().setInterval().clearInterval()提供这一功能.   前者是从运行的那一 ...

  5. JavaScript 客户端JavaScript之 脚本化文档

    客户端JavaScript的存在把静态HTML转变为交互式的Web应用程序,脚本化Web页面的内容正是JavaScript存在的理由.   一个文档对象模型或者说DOM就是一个API,它定义了如何访问 ...

  6. Javascript学习8 - 脚本化文档(Document对象)

    原文:Javascript学习8 - 脚本化文档(Document对象) 每个Web浏览器窗口(或帧)显示一个HTML文档,表示这个窗口的Window对象有一个document属性,它引用了一个Doc ...

  7. Javascript学习7 - 脚本化浏览器窗口

    原文:Javascript学习7 - 脚本化浏览器窗口 本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...

  8. JavaScript权威指南--脚本化CSS

    知识要点 客户端javascript程序员对CSS感兴趣的是因为样式可以通过脚本编程.脚本化css启用了一系列有趣的视觉效果.例如:可以创建动画让文档从右侧“滑入”.创造这些效果的javascript ...

  9. JavaScript权威指南--脚本化文档

    知识要点 脚本化web页面内容是javascript的核心目标. 第13章和14章解释了每一个web浏览器窗口.标签也和框架由一个window对象所示.每个window对象有一个document对象, ...

  10. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

随机推荐

  1. CSS :first-child 选择器 和 HTML DOM firstChild 属性

    CSS 选择器参考手册 实例 选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式: p:first-child { background-color:yellow; } 亲自 ...

  2. 友盟SDK实现分享

    友盟SDK文档已经写得很详细了,这边整理笔记,先过一遍流程: 1⃣️注册友盟账号以获取Appkey,下面以分享到微信为例 2⃣️申请第三方账号是因为要进行分享.授权这样的操作肯定是要通过第三方的审核( ...

  3. dede:field name='imgurls'不能二次使用的解决办法

    {dede:field name='imgurls' alt='图片输出区'}图片链接  [field:linkurl/]图片地址 [field:imgsrc/]{/dede:field} 这个标签不 ...

  4. Android项目实战(二十七):数据交互(信息编辑)填写总结

    前言: 项目中必定用到的数据填写需求.比如修改用户名的文字编辑对话框,修改生日的日期选择对话框等等.现总结一下,方便以后使用. 注: 先写实现过程,想要学习的同学可以看看,不需要的同学可以直接拉到最下 ...

  5. Android自定义控件4--优酷菜单的菜单键及细节补充

    在上篇文章中实现了优酷菜单执行动画,本文接着完善已经实现的动画功能 本文地址:http://www.cnblogs.com/wuyudong/p/5915958.html ,转载请注明源地址. 已经实 ...

  6. weblogic安装注意事项_linux

    ➠更多技术干货请戳:听云博客 一.安装过程:参考“weblogic安装截屏(linux)” 注意事项:安装weblogic时,需要注意以下两点: 1.首先在安装目录下创建weblogic12文件夹 如 ...

  7. 在 CentOS7 上安装 MongoDB

    在 CentOS7 上安装 MongoDB 1 通过 SecureCRT 连接至 CentOS7 服务器: 2 进入到 /usr/local/ 目录: cd /usr/local 3 在当前目录下创建 ...

  8. Play Framework 完整实现一个APP(十一)

    添加权限控制 1.导入Secure module,该模块提供了一个controllers.Secure控制器. /conf/application.conf # Import the secure m ...

  9. [Erlang 0108] Elixir 入门

    Erlang Resources里面关于Elixir的资料越来越多,加上Joe Armstrong的这篇文章,对Elixir的兴趣也越来越浓厚,投入零散时间学习了一下.零零散散,测试代码写了一些,Ev ...

  10. mysql中boolean类型

      MYSQL保存BOOLEAN值时用1代表TRUE,0代表FALSE,boolean在MySQL里的类型为tinyint(1), MySQL里有四个常量:true,false,TRUE,FALSE, ...