26-第二十六章 Ajax封装 跨域 jsonp (二)

一、Ajax封装

1. function request(){

2.        ajax({
   

3.            type:'POST',//请求类型
   

4.            url:'data.json',//请求路径
   

5.            asyn:true,//是否异步
   

6.            data:{//数据
   

7.                username:'千寻',
   

8.                password:'888'
   

9.            },
   

10.            dataType:'text',//请求数据类型
    

11.            success:function(response){//请求成功处理函数
    

12.                console.log( response );
    

13.               var response = JSON.parse(response);
    

14.                console.log( response[2].name );
    

15.            },
    

16.            error:function(status){//请求失败处理函数
    

17.                console.log(status);
    

19.            }
    

21.        })
    

23.    }
    

25.//ajax 封装

26.    function ajax(obj){
    

27.        var type = obj.type||'GET',//请求类型
    

28.        url = obj.url,//url处理
    

29.        asny = obj.asny!==true,//异步处理
    

30.        data = '',//预设写入数据
    

31.        dataType = obj.dataType||'json',//请求类型
    

32.        success = obj.success,//回调函数
    

33.        error = obj.error;//错误处理函数
    

34.        for(key in obj.data){//数据处理
    

35.            data += key+'='+obj.data[key]+'&';
    

36.        }
    

37.        data = encodeURI(data);
    

38.        //console.log(data);
    

39.        var xhr=new XMLHttpRequest();
    

40.        //console.log(xhr);
    

41.        if(window.XMLHttpRequest){
    

42.            xhr = new XMLHttpRequest();
    

43.        }else{
    

44.            try{
    

45.               xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0');
    

46.            }catch(e){
    

47.               xhr = new ActiveXObject('Msxml2.XMLHTTP.3.0');
    

48.            }
    

49.        }
    

50.        //如果是GET请求方式,设置数据
    

51.        if(type.toUpperCase() == 'GET'){
    

52.            var date = new Date().getTime();//添加一个时间用来处理，GET方式缓存的问题
    

53.            //console.log(date);
    

54.            url = url+'?'+data+date;
    

55.            data =null;
    

56.        }else if(dataType.toUpperCase() == 'XML'){
    

57.            data =null;
    

58.        }
    

59.        xhr.open(type,url,asny);//请求架设
    

60.        xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded');//设置请求头信息
    

61.        //console.log(data);
    

62.        xhr.send(data);//发送数据
    

63.        xhr.onreadystatechange= function(){//监听请求
    

64.            //readyState 为XMLHttpRequest对象的状态
    

65.            //status 为服务器返回的http状态码
    

67.            if(xhr.readyState== 4 && xhr.status==200){
    

68.                var response;
    

69.                if(dataType === 'json' || dataType === 'text'){
    

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

71.                        //解析json数据
    

72.                        response = JSON.parse(xhr.responseText);
    

73.                    }else{
    

74.                        //普通数据
    

75.                         response = xhr.responseText;
    

76.                    }
    

78.                }else{
    

79.                    response = xhr.responseXML;
    

80.                }
    

81.                success&&success(response);
    

82.            }else{
    

83.                error&&error(xhr.status);
    

84.            }
    

85.        }
    

87.    }
    

二、跨域
iframe 跨域
json 跨域

三、jsonp
jsonp,大家已经知道json是什么了，那么p是什么？p是填充的意思,json的填充

jsonp返回的数据形式是 callback({age:30,name:'二狗'}) 而不是{age:30,name:'二狗'}是用括号包裹,前面的名称就是‘填充’，也就是jsonp的p.

为什么前面有一段字母呢？因为script接受的数据如果是一个json没办法保存，而调用一个函数,{}数据作为实参传递,这样就可以拿到json中的数据
jsonp前端代码看起来像这样

1. <script>

2.    function callback(data){ //定义接收数据的处理函数
   

3.        console.log( data);
   

4.    }
   

5. </script>
6. <script src='./8-1jsonp.php?jsonp=callback'></script>
7. //我需要后台返回一个callback({数据})这样的一个值，实质就是调用上面的函数

jsonp中8-1jsonp.php后台中的代码

1.<?php

2. _GET['jsonp'];//获取jsonp的值：callback,
3. $arr = array(

4.    "name"=>"千寻",
   

5.    "age"=>50
   

6. );//php中的json
7. echo arr).")";//JSON对象进行转字符串处理
8. //就是返回 callback({name:'千寻'，age:50})

10.?>