html5的ajax学习（三）

一.原生的ajax封装

function ajax(data) { 
//data={data:"",dataType:"xml/json",type:"get/post",url:"",asyn:"true/false",success:function(){},failure:function(){}}
//data:{username:123,password:456}
//data = 'username=123&password=456';
//第一    
var ajax =null;
if (window.XMLHttpRequest){
    ajax = new XMLHttpRequest();
}else{ 
   ajax = new ActiveXObject();
}
//第二
var type = data.type =='get'?'get':'post';
var url = '';
if(data.url){
    if(type == 'get'){ 
 `注意事项－－－get请求的参数的拼接`
       url += "?" + data.data + "&_t="+new Date().getTime(); 
       //http://www.jianshu.com/search?q=1&page=1&type=notes 
       //http://www.jianshu.com 
       //url += "/search?" + 'q=1' + "&page=1&type=notes";
    }
}
var flag = data.asyn == 'true'?'true':'false';
ajax.open(type,url,flag);
//第三
if (type == 'get'){ 
   ajax.send(null);
}else if(type == 'post'){   
 ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
 ajax.send(data.data);
}
//第四
ajax.onreadystatechange = function () { 
   if(this.readyState == 4){ 
       if (this.status == 200){  
          if(typeof data.success == 'function'){
              var d = data.dataType == 'xml'?ajax.responseXML:ajax.responseText; 
               data.success(d);
            } 
       }else {
            if(typeof data.failure == 'function'){  
              data.failure();  
              } 
         }  
      } 
   }
}

---

原生的ajax的调用

 window.onload = function () {
    var btn = document.getElementById('btn'); 
     btn.onclick = function () { 
         var param = {   
             url:"http://www.jianshu.com", 
             type:'get', 
             dataType:'son',
             success:function (data) {
                  alert(data);
                  alert(1);
              }
          }; 
       ajax(param); 
     }
  }

二.jquery的ajax

2.1 jquery的语法

屏幕快照 2016-07-21 下午4.00.05.png

 ＊＊＊＊ jquery的ajax的应用

 

三. function讲解

function函数(普通函数、匿名函数、闭包函数)的讲解
http://www.cnblogs.com/polk6/p/3284839.html

function函数的补充
javascript代码的执行过程
1）预解析：把所有的函数定义提前，所有的变量的声明提前，变量赋值不提前。所以函数可以先调用后定义。
2）执行:从上到下执行

---

函数的闭包：

---

闭包的应用：for循环不存在作用域的问题（全局和函数存在作用域的问题）

var data = [];
for(var i = 0; i < 3;i++){
    data[i] = function () {
        console.log(i);
    }}
//此时i＝3；
data[0]();//输出为3
data[1]();//输出为3
data[2]();//输出为3

对比如下代码：输出0 1 2

var data = [];
var i = 3;
for( i = 0; i < 3;i++){
    data[i] = (function (k) { 
       return function () {
            console.log(k);
        } 
    })(i);
}
data[0]();//输出0
data[1]();//输出1
data[2]();//输出2

例如：调用function的方式

 function add(k) { 
   this.k = k; 
   this.product = function () {
        console.log(this.k+'jia');
        alert(1); 
   } 
 }  
//1.没有输出
//add('1');

// 2.Uncaught TypeError: ad is not a function
// var ad = add('ni');
//ad();

//3.正确的调用方法
 var ad =new  add('you');
 ad.product();

四.ajax的跨域问题

http:// —— 协议
www —— 子域名
abc.com —— 主域名
8080 —— 端口号
scripts/jquery.js —— 请求资源地址
其中当 协议 子域名 主域名 端口号 中任意一个不同是都算作不同域。

4.1 ajax跨域的问题

1.出于安全考虑 浏览器不允许ajax跨域获取数据
2.可以通过script的src加载js的方式传递数据

4.2 jsonp的案例
前端代码

//callback的函数名可以定制变为cb，下面的script里面变为cb；后端代码不需要变动

后端代码jsonp.php：

4.3 jquery的jsonp

$(function(){
    $.ajax({
        type:"get",
        async:false,
        url:"./jsonp.php",//调用后拼接为"./jsonp.php?_jsonp=callback"
        dataType:"jsonp",
         jsonp:"cb",//相当于_jsonp
         jsonpcallback:"callback",//相当于callback
        success:function(json){
            console.log(json);
        },
        error:function(){
            console.log('fail');
        }
    });
})