zoukankan      html  css  js  c++  java
  • ajax详细讲解和封装包括HTTP状态码

    AJAX(异步的JavaScript和XML,用异步的形式去操作xml)

    主要的作用:数据交互

      好处:

                  1.节省用户的操作时间

                  2.提高用户体验

                  3.减少数据请求(传输获取数据)

    function ajax(method,url, data, success){

     //第一步:创建ajax对象

    var xhr=null;

      //这判断主要是为了兼容IE6,IE6没有XMLHttpRequest这个对象,所以前面要写上window,防止报错。

      //还有一种写法是用try{尝试执行的代码如果有错误,则会执行catch里面的}catch(e){}

    if(window.XMLHttpRequest){

          //标准浏览器的对象(包括IE7-IE8)

          xhr=new XMLHttpRequest();

    }else{

          //IE6下是这个对象

          xhr=ActiveXObject('Microsoft.XMLHTTP');

    }

    //如果当前方法为get并且有数据的情况下

    if(mothod=='get'&& data){

         url+='?'+data;

    }

    //第二步:提交前的准备工作

     

     

      open方法里面3个参数

            1.用什么方式提交(get或者post)

            2.请求地址

            3.是否异步

    区别:

      get方式:把数据名称和数据值用=连接,如果有多个的话。那么他会把多个数据组合用&进行连接,然后把数据放到URL?后面传到指定页面,URL有长度限制,会被缓存。用户安全比较差些。

      post方式:通过请求头发送的,理论上无限制大小,不会被缓存,安全性要好些。

      true(异步):前面代码没执行完不会影响后面的代码执行

      false(同步):前面的代码没执行完,后面的代码不会执行

       xhr.open(method,url,true);

    第三步:提交发送请求

    //如果是空的代表是post

       if(method=='get'){

           xhr.send();

        }else{

          //设置请求头文档类型

         xhr.setRequstHeader('content-type','application/x-www-form-urlencoded');

         xhr.send(data);

       }

    第四步:等待服务器返回内容

     //responseText:  ajax请求返回的内容

     //readystate属性:请求状态

     //onreadystatechang:当状态发生改变时触发

     xhr.onreadystatechange=function(){

        //请求状态等于4,代表响应内容解析完成。可以在客户端调用了

          if(xhr.readystate==4){

        //当服务器状态码等于200的时候,代表服务器返回成功

              if(xhr.status==200){

                 //回调函数

                  success && succss(xhr.responseText);

             }else{

                  alert('出错了,Err:'+xhr.status);

              }

           }

       }

    }

    调用:

    ajax('get' , '1.php', '' ,function(data){

             console.log(data);

    })

    HTTP状态码:总共分为5种类型

             1字开头:代表消息类型

             2字开头:代表成功类型

             3字开头:代表重定项类型

             4字开头:代表错误类型

             5字开头:代表服务器错误

    希望能帮助需要的朋友,帮助它人也是帮助自己!

  • 相关阅读:
    每日总结
    每日总结
    每日总结
    每日总结
    每日总结
    每日总结
    每日总结
    每日总结
    每日总结
    Windows邮件添加QQ邮箱
  • 原文地址:https://www.cnblogs.com/ruanwei/p/6544050.html
Copyright © 2011-2022 走看看