当前位置:首页 > 网站技术 > 前端技术 > 正文内容

javascript之原生ajax请求步骤

小彬2020-07-23前端技术156


一、什么是Ajax?

Ajax的全称是Asynchronous JavaScript and XML(即异步的 JavaScript和 XML,它并不是一种新的编程语言,结合了多项技术的浏览器端的网页开发技术

ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术


ajax的优点

 通过异步模式,提升了用户体验

 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用

 Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载



ajax的缺点

 不支持浏览器back按钮

 安全问题 AJAX暴露了与服务器交互的细节

 对搜索引擎的支持比较弱


XMLHttpRequest对象 是一种支持异步请求的技术,它是Ajax的核心XMLHttpRequest的作用

 可以向服务器提出请求并处理响应,而不阻塞用户

 可以在页面加载以后进行页面的局部更新


二、创建XMLHttpRequest对象

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤

1、创建XMLHttpRequest对象,也就是创建一个异步调用对象

// 第一种方法,封装通用的xhr
    function createXHR(){
      // 判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7,firefox,opera等
      if(typeof XMLHttpRequest != 'undefined'){
        return new XMLHttpRequest();
      // 判断IE老版本 ie5或者ie6是 ActiveXObject
      }else if(typeof ActiveXObject != 'undefined'){
      // 将所有可能出现的ActiveXObject版本放在一个数组中
          var xhrArr = [
            'Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0',
            'MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0',
          ]
          // 遍历创建XMLHttpRequest对象
          var len=xhrArr.length,xhr
          for(var i=0;i<len;i++){
            try{
              // 创建XMLHttpRequest对象
              xhr=new ActiveXObject(xhrArr[i]) 
              break;
            }catch(ex){
            }
          }
          return xhr;
      }else{
        throw new Error('不支持')
      }
    }
    // XMLHttpRequest对象
    var xhr= createXHR();
    console.log(xhr)
    
    
 //第二种方法,直接new XMLHttpRequest对象即可
 
 var xhr =new XMLHttpRequest();
        console.log(xhr)
        
 两种方法都是一样的


2、创建一个新的HTTP请求,并指定该HTTP请求的方法、URL

语法:open(method,url,async)

功能:创建HTTP请求,规定请求的类型、url及是否是异步处理请求

  参数说明:

   1、method:请求类型,GET或POST

  与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用,然而,在

      以下情况中,必须使用 POST 请求:

       无法使用缓存文件(更新服务器上的文件或数据库)

       向服务器发送大量数据(POST 没有数据量限制)

       发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

   2、url:文件在服务器上的位置

  url 参数是open()方法中唯一一个必须要指定的参数,用来设置服务器上文件的地址,该文件可以是任何类型的文件,如 .txt 和 .xml,或者服务器脚本文件,如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)

   3、 async:true(异步)或false(同步)

   同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

   异步: 请求通过事件触发->服务器处理(这时浏览器仍然可以作其他事情)->处理完毕

   说明:async是一个布尔值。如果是异步通信方式(true),客户机就不等待服务器的响应;如果是同步方式(false),客户机就要等到服务器返回消息后才去执行其他操作

  注意事项:

  open方法不会向服务器发送真正请求,它相当于初始化请求并准备发送只能向同一个域中使用相同协议和端口的URL发送请求,否则会因为安全原因报错



3、如何发送请求

 语法:send(string)

 功能:将请求发送到服务器

 参数说明:string仅用于post请求

 注意事项:仅在POST请求时可以传入参数,不需要则发送null,在调用send方法之后请求被发往服务器

get请求格式: xhr.send(null);

post请求格式:

 xhr.setRequestHeader("MyHeader","MyValue");//这句在index.php里显示

  xhr.send('a=aa&b=bb&c=cc');




4、设置响应HTTP请求状态变化的函数

 // 第三步、响应XMLHttpRequest对象状态变化的函数
    // 利用onreadystatechange在readyState改变时触发
    xhr.onreadystatechange =function(){
      // 异步调用成功
      if(xhr.readyState==4){
        if((xhr.status>=200 && xhr.status <300)||xhr.status == 304){
          // 获取返回数据
          console.log(xhr.responseText)
        }else{
          console.log(xhr.status)
        }
      }
    }



5、如何添加HTTP头(post请求时)

 如果需要像 HTML 表单那样 POST 数据,需使用 setRequestHeader()来添加 HTTP 头,然后在 send() 方法中规定希望发送的数据

 语法:xmlhttp.setRequestHeader(header,value)

 使用:xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded")


三、设置响应HTTP请求状态变化的函数

在收到响应后相应数据会填充到XHR对象的属性,有四个相关属性会被填充:

 responseText——从服务器进程返回数据的字符串形式

 responseXML——从服务器进程返回的DOM兼容的文档数据对象

 status——从服务器返回的数字代码,如404(未找到)和200(已就绪)

 statusText——伴随状态码的字符串信息



四、异步请求响应

onreadystatechange 事件

监听readyState:XMLHttpRequest状态(0~4的值)

0--请求未初始化

1--服务器连接建立

2--请求已接受

3--请求处理中

4--请求已完成,响应已就绪

status:HTTP响应码

200:响应成功

404:未找到页面

回调函数:条件满足后,调用函数,执行响应操作 ,并处理返回的数据

// 第三步、响应XMLHttpRequest对象状态变化的函数
    // 利用onreadystatechange在readyState改变时触发(不然会出现异步请求时response为空的情况)
    xhr.onreadystatechange =function(){
      // 异步调用成功
      if(xhr.readyState==4){
        if((xhr.status>=200 && xhr.status <300)||xhr.status == 304){
          // 第五步、获取返回的数据
          console.log(xhr.responseText)
        }else{
          console.log(xhr.status)
        }
      }
    }



完整的请求代码:

 <script>
    // 封装通用的xhr
    function createXHR(){
      // 判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7,firefox,opera等
      if(typeof XMLHttpRequest != 'undefined'){
        return new XMLHttpRequest();
      // 判断IE老版本
      }else if(typeof ActiveXObject != 'undefined'){
      // 将所有可能出现的ActiveXObject版本放在一个数组中
          var xhrArr = [
            'Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0',
            'MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0',
          ]
          // 遍历创建XMLHttpRequest对象
          var len=xhrArr.length,xhr
          for(var i=0;i<len;i++){
            try{
              // 创建XMLHttpRequest对象
              xhr=new ActiveXObject(xhrArr[i]) 
              break;
            }catch(ex){
            }
          }
          return xhr;
      }else{
        throw new Error('不支持')
      }
    }
    // XMLHttpRequest对象
    var xhr= createXHR();
    // console.log(xhr)
    // 第三步、响应XMLHttpRequest对象状态变化的函数
    // 利用onreadystatechange在readyState改变时触发(不然会出现异步请求时response为空的情况)
    xhr.onreadystatechange =function(){
      // 异步调用成功
      if(xhr.readyState==4){
        if((xhr.status>=200 && xhr.status <300)||xhr.status == 304){
          // 第五步、获取返回的数据
          console.log(xhr.responseText)
        }else{
          console.log(xhr.status)
        }
      }
    }
    // 第二步、创建请求
    xhr.open('get','index.php',true);
   
    // 第四步、设置头部信息
    xhr.setRequestHeader("MyHeader","MyValue");//这句在index.php里显示
    // 发送请求
    xhr.send(null);
   
  </script>


$.ajax

var $ = {
ajax:function(options){
        var xhr = null,          // XMLHttpRequest对象
            url = options.url,   // url地址
            method = options.method || 'get', // 传输方式,默认为get
            async = typeof(options.async) === "undefined"?true:options.async,
            data = options.data || null,      // 参数
            params = '',
            callback = options.success,       // ajax请求成功的回调函数                   
            error = options.error;
            // 将data的对象字面量的形式转换为字符串形式
            if(data){
                for(var i in data){
                    params += i + '=' + data[i] + '&';
                }
                params = params.replace(/&$/,"");
            }
            // 根据method的值改变url
            if(method === "get"){
                url += '?'+params;
            }
if(typeof XMLHttpRequest != "undefined"){
            xhr = new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
// 将所有可能出现的ActiveXObject版本放在一个数组中
var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
// 遍历创建XMLHttpRequest对象
var len = xhrArr.length;
for(var i = 0;i<len;i++){
                try{
                // 创建XMLHttpRequest对象
                    xhr = new ActiveXObject(xhrArr[i]);
                    break;
                }
                catch(ex){
                }
}
}else{
throw new Error('No XHR object availabel.');
}
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
                if((xhr.status >=200 && xhr.status <300) || xhr.status === 304){
                    callback && callback(JSON.parse(xhr.responseText))
                }else{
                    error && error();
                }
}
}
    // 创建发送请求
    xhr.open(method,url,async);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.send(params);
    },
    jsonp:function(){
        // 跨域
    }
}


标签: ajaxjavascript
分享给朋友:

相关文章

CSS Flex 盒布局教程

CSS Flex 盒布局教程

参考文章:A Visual Guide to CSS3 Flexbox Properties,W3C CSS Flexible Box Layout Module Level,Flex 布局教程:语法...

PC端固定顶部的导航栏在屏幕缩小时左右滚动

PC端固定顶部的导航栏在屏幕缩小时左右滚动

一般网站都会有固定导航栏,但是大多数都是随着屏幕的缩小并不会出现左右滚动。比如京东和淘宝的官网就是没有出现左右滚动你想想,如果把这个问题解决掉,其实你比他们还优秀言归正传,那就来说说怎么实现。首先上我...

使用rem做手机端网页自适应

使用rem做手机端网页自适应

利用原生js做手机端网页自适应解决方案rem布局刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图function getRem(pwidth,...

HTTP之协议结构、通讯原理以及http特性和使用方法

HTTP之协议结构、通讯原理以及http特性和使用方法

1、http协议 超文本传输协议(http)是一种通信协议,它允许将超文本标记语言(html)文档从web服务器传送到客户端的浏览器http是一个属于应用层的面向对象的协议web是一种基于超...

前端日常编程代码便捷汇总

前端日常编程代码便捷汇总

1、使用form表单进行上传文件需要为form添加enctype="multipart/form-data" 属性,除此之外还需要将表单的提交方法改成post,如下 me...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信