什么是ajax

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

ajax是一种用于创建快速动态网页的技术,传统的网页(如果不使用ajax)如果需要更新内容,必须加载整个网页页面.

 post和get的区别

get:请求是在地址栏上,信息不安全.传数据流量小,一般限制在2k

创建请求对象

所有现代的浏览器均支持XHttpRequest对象(ie5和ie6使用ActiveXObject)

 1 // IE 7 +, Firefox,Chrome, Opera, Safari 浏览器执行代码
 2  let request  = new XMLHttpRequest();
 3 
 4 // IE6, IE5 浏览器执行代码
 5     let request = new ActiveXObject('Microsoft.XMLHTTP');
 6  //兼容写法
 7 
 8    let http = null;
 9 
10    if(window.XMLHttpRequest){
11 
12        http = new XMLHttpRequest(); 
13        
14    }else{
15 
16        http = new ActiveXObject('Microsoft.XMLHTTP');
17 
18    }

向服务器发送请求

如果需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法

open(method,url,async):

method:请求的类型；GET 或 POST

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

async: true（异步）或 false（同步）

send(string):

string:仅用于 POST 请求

服务器响应(onreadystatechange 事件)

当请求被发送到服务器时，我们需要执行一些基于响应的任务,每当 readyState 改变时，就会触发 onreadystatechange 事件,readyState 属性存有 XMLHttpRequest 的状态信息。

onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState: (0.请求未初始化 1.服务器连接已建立 2.请求已接收 3.请求处理中 4.请求已完成，且响应已就绪)

status: (200: "OK" 404: 未找到页面)

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

  let btn = document.querySelector('.btn');
  
   btn.addEventListener('click', function(){
        loadInfo();
   });
   


   function loadInfo(){
        
   let http = null;

    if(window.XMLHttpRequest){

        http = new XMLHttpRequest(); 

    }else{

        http = new ActiveXObject('Microsoft.XMLHTTP');

    }

    http.onreadystatechange = function(){

        if(http.readyState == 4 && http.status == 200){
             console.log(http.responseText);
        }else{
             console.log("请求失败了");
        }

    }

    http.open('GET','http://www.ysqorz.top:8888/api/private/v1/rights/list');
    http.send();
}

案例（post请求登录）

 let btn = document.querySelector('.btn');

  let username = document.querySelector(".username");
  let password = document.querySelector(".psd");
  let value1 = '';
  let value2 = '';
   btn.addEventListener('click', function(){
         value1 = username.value;
         value2 = password.value;
       
       // console.log(value1);
        loadInfo();
   });
   

   //请求

   function loadInfo(){

   
        
   let http = null;

    if(window.XMLHttpRequest){

        http = new XMLHttpRequest(); 

    }else{

        http = new ActiveXObject('Microsoft.XMLHTTP');

    }

    http.onreadystatechange = function(){

        if(http.readyState == 4 && http.status == 200){
             console.log(http.responseText);
        }

    }

    http.open('POST','http://www.ysqorz.top:8888/api/private/v1/login');
    http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    http.send('username='+value1+'&'+'password='+value2);
}

ajax请求代码封装

 ajax({
        url:'http://www.ysqorz.top:8888/api/private/v1/login',
        type:"POST",
        data:{
            username:"admin",
            password:123456
        },
        timeout:5000,                //过期时间
        success:function(res){
             
            console.log(res);

        },
        error:function(error){

            // console.log("错误信息"+error);

        }
    })




    function ajax(obj){

         obj = obj || {};

        obj.type = (obj.type || "GET" ).toLowerCase();   //默认请求方式GET;

        //获取请求参数
        let params = formatParams(obj.data);


        //请求对象的兼容
        let http = null;

        if(window.XMLHttpRequest){

            http = new XMLHttpRequest(); 

        }else{

            http = new ActiveXObject('Microsoft.XMLHTTP');

        }


        //发起请求

        if(obj.type == "get"){

            http.open('GET',obj.url+"?"+params);
            http.send(null);

        }else if(obj.type == "post"){
            http.open('POST',obj.url);

            http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

            http.send(params);
        }



        //超时处理

         setTimeout(function(){
             
              if(http.readyState != 4){
                   http.abort();    //终止请求
              }

         },obj.timeout);




            http.onreadystatechange = function(){

                if(http.readyState == 4 && http.status == 200){
                    
                      obj.success && obj.success(JSON.parse(http.responseText));
                
                }else{

                      obj.error && obj.error(http);
                }

            }

    }



    //格式化参数

   function formatParams(objParams){

       let newArr  = [];

        for(let name in objParams){
            newArr.push(name+"="+objParams[name]);
        }

        return newArr.join("&");
    }

这里还为总结了一下,通用ajax格式

function ajaxs(url,type,data,dataType,sCallback,fCallback){
    $.ajax({
        type:type,
        url:url,
        async:true,
        contentType : "application/json; charset=utf-8",
        data:data,
        jsonp:'jsoncallback',
        dataType:dataType,
        success:function(jsondata){
            sCallback && sCallback(jsondata);
        },
        error:function(e){
            fCallback && fCallback();
        }
    });
}

function ajaxData(){
ajaxs('http://.....','post',jsons,'jsonp',function(data){
console.log(data);
},function(e){alert('失败'+e)});
}

 ajax请求数据，返回文本格式

$.ajax({
          type: "POST",
          url: "请求地址",
          data : {
                   username : '参数1'
               },
          dataType: "text",//请求参数的格式为json.另外还有text等
          async: false,//这里默认为false，即异步请求，如果为true就是同步
          success: function(data){
                 //成功返回信息
              console.log(data);
          },
          error: function (message) {
                //错误返回信息
          }
});

ajax请求数据，返回JSON格式

//数据格式
[{"ID":0,"title":"4220"},{"ID":0,"title":"4220"}]
$.ajax({
          type: "POST",
          url: "请求地址",
          data : {
                   username : '参数1'
               },
          contentType: "application/json; charset=utf-8",
          dataType: "json",//请求参数的格式为json.另外还有text等
          async: false,//这里默认为false，即异步请求，如果为true就是同步
          success: function(data){
                 //成功返回信息
                 var obj = eval(data);
                 //注意：使用eval来解析JSON格式字符串的时候，会将{}解析为代码块，而不是对象的字面量
        //1.在JSON格式的字符串前面拼接上 "var o ="
        //2.把JSON格式的字符串使用()括起来，就不会将{}解析为代码块，而是表达式
                 console.log("MY:" + obj[0].title);
          },
          error: function (message) {
                //错误返回信息
          }
});

json常用的方法

JSON.parse() :

JSON 通常用于与服务端交换数据,在接收服务器数据时一般是字符串。我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

JSON.stringify():

JSON 通常用于与服务端交换数据,在向服务器发送数据时一般是字符串,我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。