原生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 代码运行分连个阶段：
// 1、预解析  --- 把所有的函数定义提前，所有的变量声明提前，变量的赋值不提前
// 2、执行  --- 从上到下执行  （setTimeout，setInterval,ajax中的回调函数，事件中的函数需要触发执行）

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