ajax冲刺03

时间：2021-05-26 01:59:53

---恢复内容开始---

1、jq中ajax封装

简单的$.ajax方法使用示例：请关注 传参类型及数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./jquery-3.3.1.min.js"></script>

    <script>

        window.onload=()=>{

            $('#btn')[0].onclick=function(){

        var code=$('#code')[0].value

        // console.log('cc')

        $.ajax({

            type:'post',

            // url:'../ajax/backend.php?code='+code,

            url:'../ajax/backend.php',//根据data自动拼接

            data:{code:code},

            dataType:'json',//xml/text/html/script/jsonp

            success:function(data){

                var info=$('#info')[0]

            if(data.flag==0){

                info.innerHTML='没有这本书'

            }

            else{

                var tag='<ul><li>价格：'+data.price+'</li><li>作者：'+data.author+'</li></ul>'

                info.innerHTML=tag

            }

            }

        })

    }

}

    </script>

    <style>

        #container {

            width: 360px;

            min-height: 100px;

            background-color: beige;

            position: absolute;

            left: 50%;

            top: 10px;

            margin-left: -180px;

        }

    </style>

</head>

<body>

    <div id="container">

        <div>

            图书编码：<input type="text" name="code" id="code">

            <input type="button" value="query" id="btn">

        </div>

        <div id="info"></div>

    </div>

</body>

</html>

2、ajax API

$.ajax中也可以传错误的回调：

error:function(data){
return console.dir(data)
}

3、$.ajax自行封装

function ajax(obj) {

    //默认参数

   var defaults = {

        type: 'get',

        data: {},

        url: '#',

        dataType: 'text',

        async: true,

        success: function (data) {

            console.log(data)

        }

    }

//处理形参，进行覆盖

    for (let key in obj) {

        defaults[key] = obj[key]

    }

//创建对象

    var xhr = null

//兼容处理

    if (window.XMLHttpRequest) {

        xhr = new XMLHttpRequest()

    } else {

        xhr = new ActiveXObject('Microsoft.XMLHTTP')

    }

//把对象形式对的参数转换为字符串形式的参数

    var param = ''

    for (let attr in obj.data) {

        param += attr + '=' + obj.data[attr] + '&'

    }

    if (param) {

        param = param.substring(0, param.length - 1)

    }

//处理get请求参数及中文乱码问题

    if (defaults.type === 'get') {

        defaults.url += '?' + encodeURI(param)

    }

//准备发送，设置发送的参数

    xhr.open(defaults.type, defaults.url, defaults.async)

    //处理post请求并设置请求头

    var data=null

    if(defaults.type==='post'){

        data=param

        xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded")

    }

    xhr.send(data)

//处理同步情求，不执行回调函数

    if(defaults.async){

        return xhr.responseText//不用传回调函数

    }

//设置回调函数

    xhr.onreadystatechange = () => {

        if (xhr.readyState === 4) {

            if (xhr.status === 200) {

                var data = xhr.responseText

                if(defaults.dataType=='json'){

                    data=JSON.parse(data)

                }

                obj.success(data)

                // console.log('ok')

            }

        }

    }

}

4、ajax跨域

1)ajax冲刺03

ajax冲刺03

ajax冲刺03

跨域是非常常见的

2）一般解决方案:jsonp

开发接口简单，不存在兼容性问题

其他方案有：

ajax冲刺03

3）跨域报错

拦截跨源请求：同源策略禁止读取位于 http://over.com/data.php 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）

Failed to load http://over.com/data.php: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

---恢复内容结束---

1、jq中ajax封装

简单的$.ajax方法使用示例：请关注 传参类型及数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./jquery-3.3.1.min.js"></script>

    <script>

        window.onload=()=>{

            $('#btn')[0].onclick=function(){

        var code=$('#code')[0].value

        // console.log('cc')

        $.ajax({

            type:'post',

            // url:'../ajax/backend.php?code='+code,

            url:'../ajax/backend.php',//根据data自动拼接

            data:{code:code},

            dataType:'json',//xml/text/html/script/jsonp

            success:function(data){

                var info=$('#info')[0]

            if(data.flag==0){

                info.innerHTML='没有这本书'

            }

            else{

                var tag='<ul><li>价格：'+data.price+'</li><li>作者：'+data.author+'</li></ul>'

                info.innerHTML=tag

            }

            }

        })

    }

}

    </script>

    <style>

        #container {

            width: 360px;

            min-height: 100px;

            background-color: beige;

            position: absolute;

            left: 50%;

            top: 10px;

            margin-left: -180px;

        }

    </style>

</head>

<body>

    <div id="container">

        <div>

            图书编码：<input type="text" name="code" id="code">

            <input type="button" value="query" id="btn">

        </div>

        <div id="info"></div>

    </div>

</body>

</html>

2、ajax API

$.ajax中也可以传错误的回调：

error:function(data){
return console.dir(data)
}

3、$.ajax自行封装

function ajax(obj) {

    //默认参数

   var defaults = {

        type: 'get',

        data: {},

        url: '#',

        dataType: 'text',

        async: true,

        success: function (data) {

            console.log(data)

        }

    }

//处理形参，进行覆盖

    for (let key in obj) {

        defaults[key] = obj[key]

    }

//创建对象

    var xhr = null

//兼容处理

    if (window.XMLHttpRequest) {

        xhr = new XMLHttpRequest()

    } else {

        xhr = new ActiveXObject('Microsoft.XMLHTTP')

    }

//把对象形式对的参数转换为字符串形式的参数

    var param = ''

    for (let attr in obj.data) {

        param += attr + '=' + obj.data[attr] + '&'

    }

    if (param) {

        param = param.substring(0, param.length - 1)

    }

//处理get请求参数及中文乱码问题

    if (defaults.type === 'get') {

        defaults.url += '?' + encodeURI(param)

    }

//准备发送，设置发送的参数

    xhr.open(defaults.type, defaults.url, defaults.async)

    //处理post请求并设置请求头

    var data=null

    if(defaults.type==='post'){

        data=param

        xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded")

    }

    xhr.send(data)

//处理同步情求，不执行回调函数

    if(defaults.async){

        return xhr.responseText//不用传回调函数

    }

//设置回调函数

    xhr.onreadystatechange = () => {

        if (xhr.readyState === 4) {

            if (xhr.status === 200) {

                var data = xhr.responseText

                if(defaults.dataType=='json'){

                    data=JSON.parse(data)

                }

                obj.success(data)

                // console.log('ok')

            }

        }

    }

}

4、ajax跨域

1)ajax冲刺03

ajax冲刺03

ajax冲刺03

跨域是非常常见的

2）一般解决方案:jsonp

开发接口简单，不存在兼容性问题

其他方案有：

ajax冲刺03

拦截跨源请求：同源策略禁止读取位于 http://over.com/data.php 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）

3）jsonp原理解析：

①静态script标签的 src属性进行跨域请求（不常用）

如果返回的是纯数据，无法通过js获取响应的数据（如 echo '123'）

可以请求js文件也可以请求php文件。不利于url传参，必须保证加载的顺序

标签内加asnyc属性后将无法获得响应数据,是异步加载。默认

情况下时同步加载

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="http://over.com/data.php"></script>

    <script>

    console.log(data)

    </script>

</head>

<body>

    <h1>你好</h1>

</body>

</html>

②动态创建script标签，通过标签的src属性发送请求

异步的

jsonp的本质：通过jsonp访问一个url地址，所返回的内容是一个函数调用，并且通过函数调用

传递一些参数

<?php

$arr=array("name"=>"cc","age"=>"14");

echo 'foo('.json_encode($arr).')';

?>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="../jq/jquery-3.3.1.min.js"></script>

    <script>

    var script=document.createElement('script')

    script.src='http://over.com/data.php'

    var head=$('head')[0]

    head.appendChild(script)

    function foo(data){

        console.log(data)

    }

    </script>

</head>

<body>

    <h1>你好</h1>

</body>

</html>

上述代码中foo必须写死，不太灵活

下面改进：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="../jq/jquery-3.3.1.min.js"></script>

    <script>

    var script=document.createElement('script')

    script.src='http://over.com/data.php?callback=func'

    var head=$('head')[0]

    head.appendChild(script)

    function func(data){

        console.log(data)

    }

    </script>

</head>

<body>

    <h1>你好</h1>

</body>

</html>

ajax冲刺03

4、jq解决跨域问题

$.ajax仍然支持跨域

经常会发生即使状态码是200也不能进入正确回调函数的情况

<?php

$cb=$_GET['cb'];

echo $cb.'('.'"hello"'.')';

?>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="../ajax/ajax.js"></script>

    <script src="../jq/jquery-3.3.1.min.js"></script>

    <script>

        var my$=(id)=>{

                return document.getElementById(id)

            }

      $(()=>{

          my$('btn').addEventListener('click',()=>{

              $.ajax({

                  type:'get',

                  dataType:'jsonp',

                  jsonp:'cb',//自定义参数名字(默认callback),

                  //这里的名字指的是等号前面的键，后端根据这个键获取方法名

                  jsonpCallback:'abc',//这个值是自定义回调函数的名字，就是=后面的值

                  url:'http://over.com/data.php',

                  success:(data)=>{

                    console.log(data)

                  }

              })

          }

              )

      })

    </script>

</head>

<body>

    <input type="button" id="btn" value="submit">

</body>

</html>

5、兼容一般处理与跨域的自封装ajax方法

function ajax(obj) {

    // 默认参数

    var defaults = {

        type: 'get',

        data: {},

        url: '#',

        dataType: 'text',

        async: true,

        success: function (data) {

            console.log(data)

        }

    }

    // 处理形参，传递参数的时候就覆盖默认参数，不传递就使用默认参数

    for (var key in obj) {

        defaults[key] = obj[key];

    }

    if (defaults.dataType == 'jsonp') {

        ajax4jsonp(defaults)

    } else {

        ajax4json(defaults)

    }

    function ajax4json(defaults) {

        // 1、创建XMLHttpRequest对象

    var xhr = null;

    if (window.XMLHttpRequest) {

        xhr = new XMLHttpRequest();

    } else {

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

    }

    // 把对象形式的参数转化为字符串形式的参数

    /*

    {username:'zhangsan','password':123}

    转换为

    username=zhangsan&password=123

    */

    var param = '';

    for (var attr in obj.data) {

        param += attr + '=' + obj.data[attr] + '&';

    }

    if (param) {

        param = param.substring(0, param.length - 1);

    }

    // 处理get请求参数并且处理中文乱码问题

    if (defaults.type == 'get') {

        defaults.url += '?' + encodeURI(param);

    }

    // 2、准备发送（设置发送的参数）

    xhr.open(defaults.type, defaults.url, defaults.async);

    // 处理post请求参数并且设置请求头信息（必须设置）

    var data = null;

    if (defaults.type == 'post') {

        data = param;

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

    }

    // 3、执行发送动作

    xhr.send(data);

    // 处理同步请求，不会调用回调函数

    if (!defaults.async) {

        if (defaults.dataType == 'json') {

            return JSON.parse(xhr.responseText);

        } else {

            return xhr.responseText;

        }

    }

    // 4、指定回调函数（处理服务器响应数据）

    xhr.onreadystatechange = function () {

        if (xhr.readyState == 4) {

            if (xhr.status == 200) {

                var data = xhr.responseText;

                if (defaults.dataType == 'json') {

                    // data = eval("("+ data +")");

                    data = JSON.parse(data);

                }

                defaults.success(data);

            }

        }

    }

}

    }

    function ajax4jsonp(defaults) {

        var param = ''

        for (var attr in defaults.data) {

            param += attr + "=" + defaults.data[attr] + '&'

        }

        if (param) {

            param = param.substring(0, param.length - 1)

            param = '&' + param

        }

        var cbName = "jQuery" + ("3.3.1" + Math.random()).replace(/\D/g, "") + '_' + (new Date().getTime())

        if (defaults.jsonpCallback) {

            console.log('ok')

            cbName = defaults.jsonpCallback

        }

        //回调函数

        window[cbName] = function (data) {

            defaults.success(data)

        }

        var script = doc.createElement('script')

        script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param

        var head=document.getElementsByTagName('head')[0]

        head.appendChild(script)

    }

8、搜索联想案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    #container{

        width: 400px;

        min-height: 300px;

        background-color: lightgreen;

        margin: auto;

        text-align: center;

        padding: 10px;

    }

    #container ul{

        margin: 0;

    }

    #container li{

        list-style: none;

        background-color: lightGray;

        text-align: left;

        padding-left: 45px;

        height: 25px;

        line-height: 25px;

        cursor: pointer;

    }

    </style>

    <script type="text/javascript" src="./jquery.js"></script>

    <script type="text/javascript">

    $(function(){

        $("#keyword").keyup(function(){

            var kw = $(this).val();

            $.ajax({

                url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',

                jsonp:'cb',

                data:{wd:kw},

                dataType:'jsonp',

                success:function(data){

                    var sug = data.s;

                    var tag = '<ul>';

                    $.each(sug,function(i,e){

                        tag += '<li>'+e+'</li>';

                    });

                    tag += '</ul>';

                    $("#info").html(tag);

                    $("#info").find('li').hover(function(){

                        $(this).css('backgroundColor','lightblue');

                    },function(){

                        $(this).css('backgroundColor','lightgray');

                    });

                }

            });

        });

    });

    </script>

</head>

<body>

    <div id="container">

        <input type="text" name="keyword" id="keyword">

        <input type="button" value="搜索" id="query">

        <div id="info"></div>

    </div>

</body>

</html>

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

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

readyState

0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用了

相关文章