首页 > 其他分享> 文章详细

浅谈ajax的使用以及一些实用方法

2021-12-17 13:03:53 阅读：121 来源： 互联网

标签：function obj 浅谈实用 ajax let http 请求

什么是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 对象转换为字符串。

标签：function,obj,浅谈,实用,ajax,let,http,请求
来源： https://www.cnblogs.com/yanne/p/15701775.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9