JavaScript基础知识之脚本化HTTP

简介: 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、使用

   一个根据指定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天前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
2月前
|
JavaScript 前端开发
用JavaScript脚本将当地时间转换成其它时区
用JavaScript脚本将当地时间转换成其它时区
|
4月前
|
JSON 网络协议 安全
《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(1)-HTTP和HTTPS基础知识
【7月更文挑战第16天】本文介绍了HTTP和HTTPS协议的基本概念与作用,强调了理解HTTP协议对使用抓包工具Fiddler的重要性。HTTP是用于Web浏览器与服务器间信息传输的协议,不加密,易被截取,不适合传输敏感信息。HTTPS是HTTP的安全版,通过SSL/TLS提供加密和服务器身份验证,确保数据安全。HTTP请求包括请求行、请求头、空行和可选的请求主体,响应则有响应行、响应头、空行和响应主体。HTTP协议无状态,而HTTPS解决了安全性问题,但也带来了额外的计算开销。Fiddler作为一个强大的抓包工具,可以帮助开发者和测试人员分析HTTP/HTTPS通信,理解请求和响应的结构。
74 4
《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(1)-HTTP和HTTPS基础知识
|
5月前
|
自然语言处理 JavaScript 前端开发
【JavaScript】JavaScript基础知识强化:变量提升、作用域逻辑及TDZ的全面解析
【JavaScript】JavaScript基础知识强化:变量提升、作用域逻辑及TDZ的全面解析
61 3
|
5月前
|
JavaScript
【干货】js判断url是否是合法http/https
【干货】js判断url是否是合法http/https
|
6月前
|
JavaScript 前端开发 NoSQL
【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
【5月更文挑战第11天】MongoDB 的 JavaScript 引擎允许在服务器端直接执行脚本,提升效率并实现定制化操作。脚本环境提供独立但与数据库关联的运行空间,引擎负责脚本的解析、编译和执行。执行过程包括脚本提交、解析、编译和执行四个步骤。掌握脚本逻辑设计和 JavaScript 语言特性对于高效利用这一功能至关重要。例如,通过脚本可以计算商品总销售额,增强数据库操作的灵活性。
103 1
【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
|
5月前
|
缓存 网络协议 安全
【常见开源库的二次开发】HTTP之libcurl库——基础知识扫盲(一)
【常见开源库的二次开发】HTTP之libcurl库——基础知识扫盲(一)
89 1
|
5月前
|
JavaScript
vue : 无法加载文件 D:\module\npm_module\npm_modules\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.c
vue : 无法加载文件 D:\module\npm_module\npm_modules\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.c
|
6月前
|
JavaScript 前端开发
基于 Node.js 环境,使用内置 http 模块,创建 Web 服务程序
基于 Node.js 环境,使用内置 http 模块,创建 Web 服务程序
|
5月前
|
前端开发 JavaScript 程序员
探索JavaScript宝库:打开基础知识与实用技能之门(数据类型与变量+ 条件与循环+函数与模块+DOM+异常+ES6)
探索JavaScript宝库:打开基础知识与实用技能之门(数据类型与变量+ 条件与循环+函数与模块+DOM+异常+ES6)
33 0

热门文章

最新文章