Ajax和封装它的小伙伴们

本文原创,转载说明,谢谢~!

一. 原生的ajax

  1. 创建核心对象
    兼容IE的核心对象创建函数

    **javascript 代码**

    调用
        var xhr = createXHR()
2. 请求头
    ①. 默认的情况下,在发送XHR请求的同时,还会发送下列头部信息
        Accept: 浏览器能够处理的内容类型
        Accept-Charset: 浏览器能够显示的字符集
        Accept-Encoding: 浏览器能够处理的压缩编码
        Accept-Language: 浏览器当前设置的语言
        Connection: 浏览器与服务器之间的连接类型
        Cookie: 当前页面的设置的任何Cookie
        Host: 发送请求的页面所在域
        Referer: 发送请求的页面URL
        User-Agent: 浏览器的用户代理字符串
    ②. 设置自定义请求头信息
        用法:必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()

       **html 代码**

         注: 可以发送默认的请求头信息 xhr.getAllResponseHeader(),然而不建议如此,否则会影响服务器的响应

3. POST请求
    XHR.open("POST","服务器响应/页面",true);

    ①. 比GET方法多一步设置请求头
    ②. 数据是通过send方法发送的。
        xhr.send("qs=true&userName=abc&pwd=123456");

    例子:
     **html 代码**

二. jquery封装的Ajax
① $.ajax(url,[settings]) setting可选,$.ajax() 可以不带任何参数直接使用,所有的选项都可以通过 $.ajaxSetup() 函数来全局设置
② $.ajax() 返回其创建的 XMLHttpRequest 对象。

理解jquery的ajax
    1. 封装了兼容不同浏览器的创建XMLHttpRequest核心对象的方法
    2. 底层设置了默认参数【默认type = post ,dataType = text等】
    3. 底层调用核心对象并根据type类型发送服务器请求
    4. 根据dataType将不同类型的响应数据统一返回到函数中【success,error】

模拟封装jQuery的ajax
   感谢一个小伙伴 出处:https://github.com/mumuy/tools-library/blob/gh-pages/code/ajax.js

javascript 代码

三. angularJS的$http

  1. $http
    ① AngularJS 中的一个核心服务,用于读取远程服务器的数据
    ② 返回一个promise对象
    ③ 语法:
    var promise = $http({
    method:’请求方法’,
    url:’请求地址’
    }).success(data,header,config,status){
    //当响应准备就绪时调用
    }}.error(fdata,header,config,status){
    //当响应以错误状态返回时调用
    }}

        由于$http方法返回一个promise对象,我们可以在响应返回时用then方法来处理回调,也可以分别用success和error
        promise.then(function(resp){
            //resp是一个响应对象
        }).function(resp){
            //带有错误信息的resp
        }
    
        或者我们的熟悉写法
        promise.success(function(data,header,config,status){  }});
        promise.error(function(data,header,config,status){  }});
    
    ④. $http.get()
        语法:
             $http.get('url',{cache: true}).success(data,header,config,status){}
    ⑤. $http.post()
        语法:
              $http.post('url', postData, config)
              .success(function(data, status, headers, config) {
                  //成功之后做一些事情
              }).error(function(data, status, headers, config) {
                  //处理错误
              });
        默认请求头
        Content-Type: application/json
        可以在.config()函数中对post请求的头进行修改或扩充
        angular.module('myApp',[]).config(function($httpProvider){
            $httpProvider.defaults.headers
                .put['X-Posted-By'] = 'MyAngularApp';
        })
» 本文来自:前端开发者 » 《Ajax和封装它的小伙伴们》
» 本文链接地址:https://www.rokub.com/9426.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!