ajax衝刺03

時間 2019-11-08

標籤 ajax 衝刺欄目 Ajax 简体版

原文原文鏈接

---恢復內容開始---javascript

一、jq中ajax封裝php

簡單的$.ajax方法使用示例：請關注傳參類型及數據css

<!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>

二、ajax APIhtml

$.ajax中也能夠傳錯誤的回調：java

error:function(data){

return console.dir(data)

}

三、$.ajax自行封裝jquery

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')
            }
        }
    }
}

四、ajax跨域ajax

1)json

跨域是很是常見的後端

2）通常解決方案:jsonp跨域

開發接口簡單，不存在兼容性問題

其餘方案有：

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.

---恢復內容結束---

一、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>

二、ajax API

$.ajax中也能夠傳錯誤的回調：

error:function(data){

return console.dir(data)

}

三、$.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')
            }
        }
    }
}

四、ajax跨域

跨域是很是常見的

2）通常解決方案:jsonp

開發接口簡單，不存在兼容性問題

其餘方案有：

攔截跨源請求：同源策略禁止讀取位於 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>

四、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>

五、兼容通常處理與跨域的自封裝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) {
        // 一、建立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);
    }
    // 二、準備發送（設置發送的參數）
    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) {
        if (defaults.dataType == 'json') {
            return JSON.parse(xhr.responseText);
        } else {
            return xhr.responseText;
        }
    }
    // 四、指定回調函數（處理服務器響應數據）
    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)
    
    }

八、搜索聯想案例：

<!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 - (完成)響應內容解析完成，能夠在客戶端調用了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。