JQuery中的ajax

最新推荐文章于 2025-03-07 23:40:50 发布

原创最新推荐文章于 2025-03-07 23:40:50 发布 · 155 阅读

1 ·

CC 4.0 BY-SA版权

JQuery中的ajax

1.ajax的优缺点

优点：
1.不需要插件的支持
2.优秀的用户体验
3.提高web程序的性能
4.减轻服务器和带宽的负担
缺点：
1.对搜索引擎的支持度不足
2.开发和调试工具缺乏
3.破坏浏览器前进和后退按钮的正常使用

2.原生js中使用ajax的步骤，以get方式为例

 //1.创建请求对象
        var request = new XMLHttpRequest();

        //2.建立链接
        request.open("get","url",true);

        //3.发送请求
        request.send();

        //4.监听结果
        request.onreadystatechange = function () {
            if(request.readyState === 4){
                if(request.status === 200){
                    console.log(request.responseText);
                    //解析json  eval  JSON.parse()
                }
            }
        }

封装ajax的函数

/* 
* ajax请求
* @param {string}:method 请求方式 get post
* @param {string}:url 请求地址
* @param {function}:fun 回调函数
* @param {string}}:data 请求参数
*/

function ajax(method,url,fun,data){
    //1.创建请求对象
    var request = new XMLHttpRequest();

    //2.建立连接 ，判断 get  GET
    if(method.toUpperCase() == "GET"){ //get  url?wd=a&count=10
        url = data ? url +"?" + data : url; //如果data有值，拼接到url中，没有值直接使用
        request.open("get",url,true);
        request.send();
    }else{ //post
        request.open("post",url,true);
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        request.send(data);
    }
    //4.监听结果
    request.onreadystatechange = function(){
        if(request.readyState == 4){
            if(request.status == 200){
               //回调函数
               //fun(eval("("+request.responseText+")"));
               fun(JSON.parse(request.responseText)); //JSON.parse 将json类型的字符串转化为真正的json数据
            
            }
        }
    }
}

2.JQuery中的ajax

$.ajax({}):是jquery中ajax最底层的实现,参数只有一个 {},是一个对象，参数以key/value的形式给出，对象里面所有的参数都是可选的

$.ajax({
          "url":请求路径，
          "type":请求方法 get post，默认是get,
          "data":请求参数{"count":10,"word":"a"}    (http://www.baidu.com?count=10&word=a,问号后面的是参数，以键值对形式给出)
          "dataType":预期服务器返回的数据类型(XML,html,script,json,jsonp,text)
          "success":function(data){}  请求成功时调用的函数，返回请求到的数据，存储在data中
          "error":function(err){}  请求失败时调用的函数，返回失败的状态
          "complete":function(data){}  请求完成后调用的函数，不管成功还是失败都会调用
            })
            
            
      //以get方式为例      
     $.ajax({
                "url":"https://eas-mock.com/mock/5d4a80b868206377092029ab/example/u",
                "type":"get",
                "data":{"count":1},
                "success":function (data) {
                    console.log(data);
                },
                "error":function (err) {
                    console.log(err);//返回整个ajax对象
                }
            })

$.get()
$.post()

/*$.get(url,data[发到后端的数据],callback)
  $.post(url,data[发到后端的数据],callback)
  如果没有发送到后端的数据可以不写
*/

$.get("https://easy-mock.com/mock/5d4a80b868206377092029ab/example/u",function (data) {
                console.log(data);
            });
            
            
$.post("https://easy-mock.com/mock/5d4a80b868206377092029ab/example/u",function (data) {
                console.log(data);
            });

3.解决跨域的方法

(1)什么是跨域？

Access to XMLHttpRequest at'https://floor.jd.com/recommend-v20/news/get?source=pc-home&pin=&uuid=1433008719&jda=76161171.1433008719.1563159054.1566293547.1566358612.20&callback=jsonpNews&_=1566358688194'from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.


//我们有时候在请求数据的时候在控制台会出现这样的报错，这个就是跨域的报错

跨域：浏览器对JavaScript有【同源策略】的限制
同源：协议名相同，域名相同，端口号一样
http://www.ujiuye.com:8080/a.js
http://www.ujiuye.com:8080/b.js

引起跨域的原因：
协议名不同:http://www.tencent.com:8080/a.js

https://www.tencent.com:8080/b.js

域名不同:http://taobao.com http://jd.com
端口号不同:http://tencent.com:5005 http://tencent.com:8080

(2)解决方法

在页面直接发送一个ajax请求受同源策略的限制，但是标签的src属性不受同源策略的限制
解决办法：

1.通过script标签的src属性引入js文件，在后台的js文件中会调用一个回调函数，将数据传入到这个函数中


$("button").click(function () {
        //url中callback=回调函数名，如果是一段数字随便起函数名，否则必须跟callback后面的名字一致
    $("head").append("<script src='https://nfa.jd.com/target_toJson?aid=0_0_13822&locid=110000&callback=jsonpDomestict'><\/script>");
            })//<script></script>记得在结束标签那转义一下
        })

        //回调函数一定是全局的
        function jsonpDomestict(data) {
            console.log(data);
        }

2.非标准传输方式:jsonp

注意：jsonp和ajax不是同一个东西
json只支持get请求，不支持post请求（一定要在后台调用回调函数）
cors：跨域资源共享（只需要后台操作）

ajax和jsonp的关系：

ajax的核心是通过XMLHttpRequest获取内容
jsonp的核心则是动态添加

 $.ajax({
         "url":"https://floor.jd.com/recommend-v20/joy_logo/get?source=pc-home&pin=&uuid=1433008719",
          "type":"get",
          "dataType":"jsonp",//必须写，解决跨域问题
          "success":function (data) { //若url中没有回调函数直接通过success获取数据，不需要设置会回调，如有，就需要在全局定义一个回调函数
                console.log(data);
            }
      });

百度的实时搜索

<input type="text">
    <ul></ul>
    <script src="js/jquery.js"></script>
    <script>
        //1.实时输入搜索
        $("input").on("input", function () {
           //2.获取搜索信息
            $.ajax(
                {   
                    "url": "https://www.baidu.com/sugrec?prod=pc&wd=" + $("input").val(),
                    "dataType": "jsonp",
                    "success": function (data) {
                        var arr = data.g;
                        console.log(arr);
                        //每次添加之前先清空ul的内容
                        $("ul").html("");
                        //根据搜索到信息的数量添加li标签
                        $(arr).each(function (index, value) {
                            $("ul").append("<li>" + value.q + "</li>");
                        })
                    }
                }
            )
        })
    </script>

在这里插入图片描述