Ajax基础

一、jquery中的ajax方法参数：
1、url:要求为String类型的参数，(默认为当前页地址)发送请求的地址。
2、type:要求为String类型的参数，请求方式(post或get)默认为get。注意：其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
3、timeout:要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
4、async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等 待请求完成才可以执行。
5、cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。 设置为false将不会从浏览器缓存中加载请求信息。
6、要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如 {foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7、dataType:要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
①xml：返回XML文档，可用JQuery处理。
②html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
③script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
④json：返回JSON数据。JQuery将返回的字符串格式数据自动转化为Javascript对象，便于直接使用obj.property格式访问。若没有指定该选项，即使返回的是JSON格式的字符串，JQuery也不会自动转换。
⑤jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
⑥text：返回纯文本字符串。
8、beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义
        HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
            function(XMLHttpRequest){
               this;   //调用本次ajax请求时传递的options参数
            }
    9、complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。
        参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
        function(XMLHttpRequest, textStatus){
            this;    //调用本次ajax请求时传递的options参数
        }
    10、success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
        (1)由服务器返回，并根据dataType参数进行处理后的数据。
        (2)描述状态的字符串。
         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this;  //调用本次ajax请求时传递的options参数
        }
    11、error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }
12.contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
13.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
            function(data, type){
                //返回处理后的数据
                return data;
            }
14.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
    function(data, type){
                //返回处理后的数据
                return data;
}
15.global：
要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
16.ifModified：
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
17.jsonp：
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
18.username：
要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
19.password：
要求为String类型的参数，用于响应HTTP访问认证请求的密码。
20.processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
21.scriptCharset：
要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
 二、jQuery.get(url, [data], [callback], [type])：使用GET方式来进行异步请求.
  参数：
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
三. jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求
参数：
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

原生ajax的使用
一、ajax是什么？
1、Asynchronous [e'sɪŋkrənəs] Javascript And XML，AJAX 不是一门的新的语言，而是对现有技术的综合利用。本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
2、异步 : 某段程序执行时不会阻塞其他程序的执行,表现形式是程序的执行顺序不依赖程序本身的书写顺序,相反的情况依次执行,那就是同步核心在于不会阻塞程序的执行, 从而提升整体执行效率
二、XMLHttpRequest
1、XMLHttpRequest是浏览器的内置对象，作用是在后台与服务器通信（交换数据）
2、用于网页的格局更新，而不是刷新整个页面
//创建一个新的XMLHttpRequest
var xhr = new XMLHttpRequest();
三、请求Request
HTTP请求由3个部分组成，正好和XMLHttpRequest相对应
1)、请求行open
xhr.open('post','01.php');
2)、请求头setRequestHeader
//post 请求头需要设置头
xhr.setRequestHeader('Conent-Type','application/x-www-form-urlencoed');
3)、请求主体 send
xhr.send('name=Jim&age=18');
//get 可以传空，因为在头的时候已经穿过数据了
四、响应Response
1、HTTP响应是由服务端放出的，客户端更应该关心度额是响应的结果
2、HTTP 响应由3个部分组成,与 XMLHttpRequest的方法或属性成对应关系
3、由于服务器做出响应需要时间(网络延迟等原因),所以需要监听服务器响应状态,再进行处理
    if( xhr.readyState == 4 && xhr.status == 200 ){
        // 进行下一步操作, 如渲染页面
        document.querySelector( '#result' ).innerHTML = xhr.responseText;
    }
五、步骤分析
1、请求未初始化(还没有调用open())
2、请求已经建立,但是还没有发送(还没有调用send())
3、请求已发送,正在处理中(通常现在可以从相应中获取内容头)
4、请求在才处理中,通常响应中已经有部分数据可以用了,但是服务器还没有完全完成响应
5、响应已经完成, 可以获取并使用服务器的响应了
六、其他注意点
1、可以使用 onreadystatechange 来监听 XMLHttpRequest 的状态
2、获取行状态 ( 包括行状态码和状态信息 )
xhr.status  // 状态码
xhr.statusText // 状态码嘻嘻
3、获取响应头
xhr.getResponseHeader( 'Content-Type' );
xhr.getAllResponseHeaders();
4、获取响应主体
xhr.responseText    // json, 文本 类型
xhr.responseXML     // xml 类型
七、API详解
1、xhr.open() 发送请求, 可以是 get 或者 post 方式
2、xhr.setRequestHeader() 设置请求头
3、xhr.send() 发送请求主体, 如果是 get 方式使用 xhr.send(null), 因为在 open 中已经发送了请求主体
4、xhr.onreadystatechange = functtion(){} 监听响应状态
5、xhr.status 表示响应码, 如 200 表示成功
6、xhr.statusText 表示响应信息. 如 ok
7、xhr.getAllResponseHeaders() 获取全部响应头信息
8、xhr.getResponseHeader( 'key' ) 获取指定响应头信息
9、xhr.reponseText xhr.responseXML 都表示响应主体, 格式不同
八、get和post的差异
1、get 没有请求主体, 使用 xhr.send(null) 发送请求主体
2、get 可以通过请求 url 上添加请求函数
3、post 可以通过 xhr.send( 'name=itcast&age=10' ) 发送请求主体
4、post 需要设置
5、get 性能高( 基本上获取内容都是使用get )
6、get 大小限制约 4kb, post 则没有限制
九、get方式的请求响应
var xhr = new XMLHttpRequest;
                xhr.open('get','01.php');
                xhr.send(null);
                xhr.onreadystatechange = function(){
            if(xhr.status == 200 && xhr.readyState == 4){
                /*获取到XML格式内容  放回的是DOM对象  document*/
                var xml = xhr.responseXML;
                /*通过选着器可以获取到xml的数据*/
                console.log(xml.querySelectorAll('array')[0].querySelector('src').innerHTML);
             }
        }
十、post请求和响应
//初始化
            var xhr = new XMLHttpRequest();
            //请求行
            xhr.open("post","03 AjaxPost.php");
            //请求头
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
            //请求内容
            xhr.send("username=rxt&password=1234");

            //监听响应改变
            xhr.onreadystatechange = function(){
            /*什么时候才算是http通讯结束 在readyState=4的是 响应完成*/
            /*什么是才算是通讯成  status 200 */
            if(xhr.status ==200 && xhr.readyState == 4){
                document.querySelector("div").innerHTML = xhr.responseText;
            }
        }
十一、XML
1、XML 是可扩展标记语言（Extensible Markup Language）的缩写，其中的 标记（markup）是关键部分。XML 可以创建内容，然后使用限定标记标记它，从而使每个单词、短语或块成为可识别、可分类的信息。您创建的文件，或文档实例 由元素（标记）和内容构成。
2、特点
必须要有根元素
不能以空格, 数字或者 . 开头, 对大小写敏感
不能交叉嵌套
属性双引号
特殊符号要使用尸体
注释和 HTML 一样
3、XML 虽然可以描述和传输复杂数据, 但是其解析过于复杂并且体积较大, 所以实际开发使用较少
4、格式
<?xml version="1.0" encoding="UTF-8"?>
        <root>
    <arrayList>
        <array>
            <src>images/banner.jpg</src>
            <newPirce>12.00</newPirce>
            <oldPrice>30.00</oldPrice>
        </array>
        <array>
            <src>images/banner.jpg</src>
            <newPirce>12.00</newPirce>
            <oldPrice>30.00</oldPrice>
        </array>
    </arrayList>
        </root>
十二、JavaScript ObjectNotation，另一种轻量级的文本数据交换格式，独立于语言。
十三、特点
1. 数据在键值对中
2. 数据由 " , " 分隔, 最后一个键值不能带 " , "
3. " [] "保存数组, " {} " 保存对象
4. 使用 "" 双引号包裹键值
        [
            {"src":"images/detail01.jpg","oldPrice":"10.12","newPrice":"130.00"},
            {"src":"images/detail02.jpg","oldPrice":"1.00","newPrice":"11.00"},
            {"src":"images/detail03.jpg","oldPrice":"100.00","newPrice":"1000.00"}
        ]
十四、不同语言下的解析 JSON
JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取
1、php 方法
json_encode() : 将 php 数组转化为 json 字符
json_decode() : 将 json 字符串 转换为 php 数组
<?php
    header('Content-Type:text/html;charset=utf-8');
    /*以json格式传输数据的时候要求响应内容格式是   application/json*/
    /*注意也可以不设置  但是这遵循的一个规范*/


    /*file_get_contents 获取文件内容*/
    $json = file_get_contents('01.json');
    /*输出json内容*/
    echo $json;
    echo '<br><br>';
    $array = array(
        array('src'=>'images/detail01.jpg','newPrice'=>'12.00','oldPrice'=>'455.00'),
        array('src'=>'images/detail02.jpg','newPrice'=>'65.00','oldPrice'=>'878.00'),
        array( 'src'=>'images/detail01.jpg','newPrice'=>'100.00','oldPrice'=>'1000.00')
    );
    /*将php数组转化成json字符*/
    $json_array = json_encode($array);
    echo $json_array;
    echo '<br><br>';
    /*将json字符转化成php数组*/
    $array_json = json_decode($json_array);
    echo $array_json;
    echo '<br><br>';

?>

javascript 解析方法
JSON对象
JSON.parse() : 字符串 转 JSON 对象
JSON.stringify() : JSON 对象 转 字符串
JSON 兼容处理 : json2.js

    var xhr = new XMLHttpRequest;
    xhr.open('get','01.php');
    xhr.send(null);
    xhr.onreadystatechange = function(){
       if(xhr.status == 200 && xhr.readyState == 4){
           /*获取仅仅是字符串*/
           var text = xhr.responseText;

           /*需要把字符串转化成JSON对象*/
           var json_obj = JSON.parse(text);
           console.log(json_obj);

           /*我们也可以把JSON对象转化成字符串*/
           var json_str = JSON.stringify(json_obj);
           console.log(json_str);
       }
    }
三、封装 Ajax 工具函数
/*
    * 1.请求的类型               type    get post
    * 2.请求地址                 url
    * 3.是异步的还是同步的         async   false true
    * 4.请求内容的格式            contentType
    * 5.传输的数据               data    json对象
    * 6.响应成功处理函数          success   function
    * 7.响应失败的处理函数        error     function
    * 这些都是动态参数  参数对象  options
    * */
    /*封装一个函数*/
    window.$ = {};
    /*申明一个ajax的方法*/
    $.ajax = function(options){


    if(!options || typeof options != 'object'){
        return false;
    }


    /*请求的类型*/
    var type = options.type || 'get';/*默认get*/
    /*请求地址 */
    var url = options.url || location.pathname;/*当前的地址*/
    /*是异步的还是同步的 */
    var async = (options.async === false)?false:true;/*默认异步*/
    /*请求内容的格式 */
    var contentType = options.contentType || "text/html";

    /*传输的数据 */
    var data = options.data || {};/*｛name:'',age:''｝*/
    /*在提交的时候需要转成 name=xjj 这种格式*/
    var dataStr = ''/*数据字符串*/
    for(var key in data){
        dataStr += key+'='+data[key]+'&';
    }
    dataStr = dataStr && dataStr.slice(0,-1);
    /*ajax 编程*/
    var xhr = new XMLHttpRequest();
    /*请求行*/
    /*(type=='get'?url+'?'+dataStr:url)判断当前的请求类型*/
    xhr.open(type,(type=='get'?url+'?'+dataStr:url),async);
    /*请求头*/
    if(type == 'post'){
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    }
    /*请求主体*/
    /*需要判断请求类型*/
    xhr.send(type=='get'?null:dataStr);
    /*监听响应状态的改变  响应状态*/
    xhr.onreadystatechange = function(){
        /*请求响应完成并且成功*/
        if(xhr.readyState == 4 && xhr.status == 200){
            /*success*/
            var data = '';
            var contentType = xhr.getResponseHeader('Content-Type');
            /*如果我们服务器返回的是xml*/
            if(contentType.indexOf('xml') > -1){
                data = xhr.responseXML;
            }
            /*如果我们的服务器返回的是json字符串*/
            else if(contentType.indexOf('json') > -1){
                /*转化json对象*/
                data = JSON.parse(xhr.responseText);
            }
            /*否则的话他就是字符串*/
            else{
                data = xhr.responseText;
            }
            /*回调 成功处理函数*/
            options.success && options.success(data);
        }
        /*计时请求xhr.status不成功  他也需要的响应完成才认作是一个错误的请求*/
        else if(xhr.readyState == 4){
            /*error*/
            options.error && options.error('you request fail !');
        }
    }
    }
    $.post = function(options){
    options.type = 'post';
    $.ajax(options);
    }
    $.get = function(options){
    options.type = 'get';
    $.ajax(options);
    }
四、jQuery中的ajax
1、jQuery为我们提供了更强大的Ajax封装
2、$.ajax({}) 可配置方式发起Ajax请求
3、$.get() 以GET方式发起Ajax请求
4、$.post() 以POST方式发起Ajax请求
5、$('form').serialize() 序列化表单（即格式化key=valkey=val）
6、url 接口地址
7、type 请求方式
8、timeout 请求超时
9、dataType 服务器返回格式
10、data 发送请求数据
11、beforeSend: function () {} 请求发起前调用
12、success 成功响应后调用
13、error 错误响应时调用
14、complete 响应完成时调用（包括成功和失败）
15、jQuery Ajax介绍
五、jQuery中ajax的使用
$.ajax({
    type : 'get',
    url : 'getCode.php',
    data : {'mobile' : phone},
    dataType : 'json',
    beforeSend : function(){
    },
    success : function(info){
    }
});

转载：https://www.cnblogs.com/liu666/p/5842333.html（她们都叫我剑侠）