ajax笔记

初识Ajax

get请求

let btn = document.getElementById('btn')
        let info = document.getElementById('info')
        btn.onclick = function () {
            let userName = document.getElementById('userName').value;
            let userPwd = document.getElementById('userPwd').value;
            //使用Ajax发送请求需要如下几步
            //1. 创建XMLHttpRequest对象
            let xhr = new XMLHttpRequest()
            //2.准备发送
            xhr.open('get' , 'check.php?userName='+userName+'&userPwd='+userPwd, true)
            //3. 执行发送动作,get的话填null，post填实际数据
            xhr.send(null)        
            //4.指定回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 ){
                    if(xhr.status == 200){
                        let data = xhr.responseText
                        if(data == '1'){//成功
                            info.innerHTML = '登陆成功'
                        }
                        else if(data == '2'){
                            info.innerHTML = '用户名或者密码错误'
                        }
                    }
                }
            }   
        }

　　

创建对象

 //1.创建XMLHttpRequest对象
            //标准浏览器
            let xhr = new XMLHttpRequest()
            //IE老版本 ie6
            let xhr1 = new ActiveXObject("Microsoft.XMLHTTP")

            //兼容性处理
            let xhr2 = null
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest()
            }
            else{
                xhr = new ActiveXObject('Microsoft.XMLHTTP')
            }

　　

请求参数分析

1. 请求方式(get获取数据，post提交数据)
2. 请求地址
3. 设置同步或异步标志位，默认是true表示异步。如果是get请求，那么请求参数必须在url中传递

let param = 'userName='+userName+'&userPwd='+userPwd
//encodeURI()用来对中文参数进行编码，防止乱码
xhr.open('get' , 'check.php?'+encodeURI(param) ,true)

xhr.open('post' , '04.php.php' ,true)

　　

执行发送请求

xhr.open(null) //get请求需要加null

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.open(param) //post在send传递参数，不需要codeURI转码,还必须要设置请求头

　　

指定回调函数

//该函数调用的条件就是readyState发生变化(不包括0到1)
xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    if(xhr.status == 200){ //表示服务器返回的数据正常，不是200的话就表示数据是错误的
                        alert(xhr.responseText)
                    }
                }
            }

　　

xhr.readyState = ?

1. 0 表示xhr对象创建完毕
2. 1 表示调用了xhr.send()，已经发送了请求
3. 2 表示浏览器已经收到服务器响应数据
4. 3 表示正在解析数据
5. 4 数据已经解析完成，可以使用了，但是这个数据不一定是正常的

json数据格式

json格式的数据和js普通对象区别：

1. json数据没有变量
2. json数据结尾没有分号
3. json数据中的键必须用双引号包住

{
    "name" : "zhangsan",
    "age" : 12,
    "lover" : ["coding","singing","dancing"],
    "friend" : {
        "high":"180cm",
        "weigth":"80kg"    
        }
}

　　

JQ中的ajax

$.ajax({
    type:'get', //xml json html script text jsonp
    url:'1.php',
    data:{code:code},
    dataType:'json',
    success : function(data){
    },
    error: function(){
    }
})

　　

Ajax跨域

同源策略

1. 同源策略是浏览器一种安全策略，所谓同源指的是请求URL地址中的协议，域名和端口都相容，只要其中之一不相同就是跨域
2. 同源策略主要为了保证浏览器的安全性
3. 在同源策略下，浏览器不允许Ajax跨域获取服务器数据

解决方法：

1. jsonp
2. document.domain+iframe
3. location.hash+iframe
4. window.name + iframe
5. window.postMessage
6. flash等第三方插件

jsonp

jsonp原理：

1. 静态script标签的src属性进行跨域请求。script标签中的async属性表示异步加载资源，默认情况是同步加载，有此属性时无法用1方法进行跨域请求。
   1. 必须保证加载顺序
   2. 不方便通过程序传递参数
2. 动态创建script标签，通过标签的src属性发送请求，这个请求是异步的(jsonp本质)

let flag = 1
let script = document.createElement('script')
script.src = 'http://tom.com/data.php?callback=hello&username=zhangsan'
let head = document.getElementsByTagName('head')[0]
head.appendChild(script)
//hello就是回调函数 这就是jsonp的本质：动态创建script标签，然后通过他的src发送跨域请求，然后服务器端响应的数据格式为函数调用，所以在发送请求之前必须先声明一个函数，并且函数名字与参与中传递的名字一致。这里声明的函数由服务器响应的内容（一段js代码）来调用
function hello(data){
    console.log(data.username,data.password) //zhangsan 123456
}
//服务器响应的内容是 函数调用
$arr = array("username"=>"zhangsan","password"=>"123456");
$cb = $_GET['cb'];
echo $cb.'('.json_encode($arr).')';

　　

jq中的jsonp跨域

$(function(){
    $(#btn).click(function(){
        $.ajax({
            type:'get',
            url:'http://tom.com//jsonp.php',
            datatype:'jsonp',
            jsonp:'cb', //jsonp属性的作用就是自定义参数名字 cb=abc 指的是等号前面的键，后端根据这个键获取方法名， jQuery默认是callback
            jsonpCallback:'abc', //回调函数名字，指的是等号后面的值
            data:{}
            success:function(data){
                console.log(data)
            },
            error:function(data){
                console.log(data)
            }
        })
    })
})