AJAX详解

AJAX
1.什么是AJAX
Asynchronous Javascript And Xml
异步的 JS 和 Xml

    Xml ： eXtensible Markup Language
        早期是做 前后端数据交互格式
        由于结构繁琐，后来就被抛弃 ...被JSON所取代

    AJAX:通过JS 异步的项服务器发送请求并接受响应数据，响应数据的格式原来是xml，后来变成了JSON

    同步请求：
        当客户端向服务器发送请求时，服务器在处理的过程中，浏览器只能等待，效率较低
    异步请求：
        当客户端向服务器发送请求时，服务器在处理的过程中，浏览器可以做其他的操作，不需要一直等待

    AJAX的优点
        1.异步 访问
        2.局部 刷新

    AJAX的使用场合
        1.搜索建议
        2.表单的验证
        3.前后端完全分离时使用
2.AJAX核心对象 - 异步对象(XMLHttpRequest)
    1.什么是XMLHttpRequest
        简称：XHR
        称为“异步对象”代替浏览器向服务器发送异步的请求并接收响应
    2.创建异步对象
        主流的异步对象是 XMLHttpRequest 类型的，并且所有主流浏览器(ie7+,Cheome,Firefox,Safari,Opera)也都支持 XMLHttpRequest,
        但在IE低版本浏览器(IE7以及以下)，就不支持 XMLHttpRequest，需要使用ActiveXObject()来创建异步对象

        如果支持 XMLHttpRequest
            var new XMLHttpRequest()
        如果不支持
            var xhr=new ActiveXObject('Microsoft.XMLHttp')
        
        练习：根据不同的浏览器创建xhr并返回
        1.创建函数 - createXhr()
        2.在函数体内，判断浏览器对xhr的支持性，创建不同的xhr
        3.创建一个按钮，调用createXhr() 得到返回值，并输出在console上
    3.xhr的成员
        1.方法 - open()
            作用：创建请求
            语法：open(method,url,async)
            method:请求方式 取值 'get' 或 'post'
            url：请求地址，字符串
            async：是否采用异步的方式发送请求，取值
                true：异步请求
                false：同步请求

            例：
                xhr.open('get','/server',true)
        2.属性 - readyState
            作用：请求的状态，通过不同的请求状态值来表示xhr与服务器的交互情况
            由 0-4 共 5 个值表示5个不同的状态
            0：请求尚未初始化
            1：xhr已经与服务器建立连接
            2：表示服务端已经接受请求
            3：表示请求正在处理中
            4：表示响应已经完成
        3.属性 - status
            作用：表示服务器端的响应状态码
            200：表示服务器已经正确处理请求并给出响应
            404：请求资源不存在
            500：服务器错误
        4.属性 - responseText
            作用：接受服务端响应回来的数据
        5.事件 - onreadystatechange
            作用：每当 xhr 的 readyState 值发生改变的时候都要触发的行为操作 - 回调函数
            关注：
                1.xhr的 readyState 是否为4
                2.xhr的 status 是否为 200

                如果以上两点同时满足的话，则可以接收响应数据(responseText)

            例：
                xhr.onreadystatechange = function(){
                    if(xhr.readyState==4&&xhr.status==200){
                        console.log(xhr.responseText)
                    }
                }
        6.方法： - send()
            作用：通知xhr开始向服务器发送请求
            语法：xhr.send(body)
                get:body 的值为 null
                    xhr.send(null)
                post：body的值为具体请求提交的数据
                    xhr.send('请求数据')
    4，AJAX的操作步骤
        1.GET请求
            1.创建 xhr 对象
            2.创建请求 - open()
            3.设置回调函数 - onreadystatechange 判断状态，接收响应，业务处理
            4.发送请求 - send()

1.AJax 发送 post 请求
1.请求数据要放在send()提交的
var xhr = createXhr()
xhr.open(‘post’,‘xxxx’,true)
xhr.onreadystatechange = function(){
xxxx xxxx
}
xhr.secd(“uname=wangwc&uage=35”);
2.Content - Type 的问题
AJax的post请求，默认会将Content-type消息头的值更改为“text/plain”,所以导致提交参数无法获取，
解决方案：将Content-type消息头的值更改为“application/x-www-form-urlencoded"即可
xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
2.json
1.JSON:介绍
JSON：JavaScript Object Notation
.

            JS       对象     表现形式
    将复杂结构的字符串转换成JS对象的表现形式，方便前端解析
2.JSON表现
    1.JSON表示单个对象
        1.使用{}表示一个对象
        2.在{}中使用key:value的形式来表示属性(数据)
        3.key必须使用""引起来
        4.value如果是字符串的话，也必须使用""引起来
        5.多对key:value之间使用,隔开
    2.使用JSON表示一个数组
        1.使用[]来表示一个数组
        2.数组中允许包含若干字符串 或 JS对象 
            1.使用JSO数组来表示若干字符串
                var arr=["王老师","王夫人","王小超"];
            2.使用JSON数组来表示若干对象
                通过一个人的数组保存3个人的信息(name,age,gender)
                
            3.使用jq循环遍历数组
                1.$arr.each();
                    $arr:jQuery中的数组
                    语法：
                    $arr.each(function(i,obj){
                        i:遍历出来的元素下标
                        obj:遍历出来的元素
                    })
                2.$.each()
                    $ ->jQuery
                    语法：$.each(arr.function(i,obj){
                    })

            4.后台处理JSON
                1.前后端JSON的处理流程
                    1.在前后端先查询出/得到复杂结构的数据
                    2.在后端将复杂结构的数据转换成符合JSON格式的字符串
                    3.在后端将JSON格式的字符串响应给前端
                    4.在前端将JSON格式的字符串在转换为JS对象/数组中允许包含若干字符串
                    5.在前段对JS对象/数组 进行循环遍历/取值操作
                2.python中的JSON处理
                    在python中可以使用json类完成JSON的转换

                    import json
                    json.dumps(元组|列表|字典)
                    return jsonStr 
                3.前段中的json处理
                    由于服务器端响应回来的数据时String，所以在前段对复杂结构的数据必须先转换成JS对象或数组，然后在取值或循环遍历
                    在JS中：
                    var js对象 = JSON.parse(JSON格式字符串)

1.使用 jquery 操作AJAX
1.$obj.load(url[,data][,callback])作用：远程加载数据并加载到$obj元素中
url:远程请求的地址
data:要传递的参数
1.字符串拼参数，采用get方式发送请求
2.使用JSON格式拼参数，采用post方式发送请求
callback:请求和响应完成之后的回调函数
function(resText,statusText){
resText:响应回来的文本
statusText：响应回来的状态文本
}
2.$.get(url[,data][,callback][,type])作用：使用get方式异步的项服务器发送请求url:远程请求的地址data:请求参数(可选)callback:响应成功后的回调函数(可选)function(resText)resText:表示响应回来的数据type:响应回来的数据的数据类型1.html:响应回来的文本当成HTML文本处理2.text：响应回来的文本当成text文本处理3.json：响应回来的文本当成JSON处理(转换成JS对象)3.$.post(url[,data][,callback][,type])v
1.jq对ajax的支持
4.$.ajax()语法：$.ajax({})
{}:请求的相关参数
1.url:字符串，表示异步请求地址
2.type:字符串，请求方式，get 或 post
3.data：传递到服务器端的参数
1.可以是字符串：“uname=wangwc&uage=30”
2.可以是json
{“uname”:“wangwc”.“uage”:30}
4.dataType:字符串，表示服务器端响应会拉埃的数据格式
1。html
2.xml
3.text
4.script
5、json
6.jsonp:跨域是使用
5.async：布尔类型，表示是否采用异步方式(true采用异步（默认），false：采用同步)
6.success：回调函数，请求和响应成功狗的操作
function(data){
data表示响应回来的数据
}
7.error：回调函数，请求或响应失败时要回来执行的操作
8.beforeSend:回调函数，发送ajax请求
2.跨域 (Cross Domain)
1.什么是跨域
HTTP协议中有一种“同源策略”
同源：在多个地址中，相同协议，相同域名，相同端口 被视为"同源"
在HTTP中，必须是同源地址才能互相发送请求，非同源的请求会被拒绝(