原生ajax jq跨域

1. 原生js封裝ajax

//建立XmlhttpRequest對象
function createXHR(){
    var xhr=null;
    if(XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else{
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}

function ajax(data){
    var xhr=createXHR();
    //初始化 準備配置參數
    var type,async;
    type=data.type=='post'?'post':'get';
    async=data.async?true:false;
  xhr.open(type,data.url,async);
    //若是是post，設置請求頭 執行發送動做
    if(type=='get'){
        xhr.send(null);
    }
   else if(type=='post'){
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(data.data);
    }
    //這段代碼在xhr.send();執行完以後才能執行 指定回調函數
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                if(typeof data.success=='function'){
                    var d=data.dataType=='xml'?xhr.responseXML:xhr.responseText;
                    data.success(d);
                }
            }else{
                if(typeof data.error=='function'){
                    data.error();
                }
            }

        }
    }

}

 

2.jq ajax使用

ajax({

    type:"get",//請求類型 默認get

    url:"php/01-gettime.php",//地址

dataType:」json」,//返回數據類型

    async:true,//是否異步 默認true

    data:null, //參數

    success: function (data) {

        alert(data);

    },

    error: function () {

        alert("錯誤");

    }

})

//JSONP : 服務器把json數據包裝到一個方法中

//客戶端提供一個對應的方法，能夠處理服務器返回的數據

3.js跨域
window.onload = function () {

    //動態建立script標籤

    var script = document.createElement("script");

    document.body.appendChild(script);

    script.src = "http://v.juhe.cn/weather/index?format=1&cityname=%E5%8C%97%E4%BA%AC&key=e982f3629ae77eb7345b7e42f29b62ae&dtype=jsonp&callback=handle";

}

返回一個函數callback後面handle（）函數

//jsonp對應的方法

function handle(data) {

    alert(data.resultcode);

}
4.jq跨域

        $(function () {

            $.ajax({

                type:"get",

             async：true, 

url:"http://v.juhe.cn/weather/index?format=1&cityname=%E5%8C%97%E4%BA%AC&key=e982f3629ae77eb7345b7e42f29b62ae&dtype=jsonp",

                dataType:"jsonp",

//                jsonp:"cb",     //未來會替換掉地址中的  callback

//                jsonpCallback:"handle",   //生成一個全局的方法  handle

                success: function (data) {

                    alert(data.resultcode);

                },

                error: function () {

                    alert("error");

                }

            });

        })

 

1. Get和post區別

GET請求的數據會附在URL以後（就是把數據放置在HTTP協議頭中），以?分割URL和傳輸數據，參數之間以&相連，如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD。

POST把提交的數據則放置在是HTTP包的包體中。

GET方式提交的數據最多隻能是1024字節, 這個限制是特定的瀏覽器及服務器對它的限制

理論上講，POST是沒有大小限制的，HTTP協議規範也沒有進行大小限制

Get是向服務器發索取數據的一種請求，而Post是向服務器提交數據的一種請求

1. 中文亂碼

js 程序代碼：url=encodeURI(url)

1. Function函數

//函數定義，能夠先調用，後定義

Function fn(){

Console.log(111)

}

//函數表達式，不能夠先調用

Var fn=function(){

Console.log(111)

}

//javascript 代碼運行分連個階段：

// 一、預解析  --- 把全部的函數定義提早，全部的變量聲明提早，變量的賦值不提早

// 二、執行  --- 從上到下執行  （setTimeout，setInterval,ajax中的回調函數，事件中的函數須要觸發執行）

 

1. js 跨域
2. jq 跨域jsonp使用