Ajax

Ajax：(Asunchronous JavaScript and XML)

　　一、定义： 是一种浏览器不用刷新整个页面就可以与服务器通讯的技术,是一种多种技术组合的技术，包括(JavaScript\HTML\CSS\DOM\XML\JSON\XMLHttpRequest)。

　　　　1.XHTML，CSS用于呈现

　　　　2.DOM实现动态显示和交互

　　　　3.Javascript绑定和处理所有数据

　　　　4.XML和JSON进行数据交换与处理

　　　　5.XMLHttpRequest对象用于进行异步数据读取

　　二、传统web和ajax的区别：

　　　　　　1>传统web是同步:(如果发送两个请求，只有第一个请求执行完之后，第二个才能请求发送)，

　　　　　　2>ajax可以异步:(如果发送两个请求，第一个请求会立即返回(请求在处理中)，这时可以立即发送第二个请求。)

　　三、Ajax的优点：

　　　　　　不用传输带数据的页面，只需传送数据即可。更快，提高用户体验，不会出现页面切换闪动。

　　四.Ajax请求的原理：

　　　　1.通过XMLHttpRequest对象发送ajax请求

　　　　2.底层是ajax引擎来发送这个(http)请求

　　　　3.服务器接收到请求，然后处理，返回响应数据

　　五.Ajax请求的过程：　　　　

　　　　1>.创建XMLHttpRequest对象，也就是创建一个异步调用对象

　　　　2>.创建一个新的http请求，并指定该http请求的方法、url、以及验证信息(由ajax引擎发送http)

　　　　3>.设置响应http请求状态变化的函数

　　　　4>.发送http请求

　　　　5>.获取异步调用返回的数据

     　　6>.使用JS和DOM实现局部刷新

　　六.原生的Ajax:

　　　　1. 创建一个xmlhttpRequest对象

　　　　2. 设置回调监听

　　　　3. 打开一个连接

　　　　4. 发请求

　　demo:(原生Ajax)

　　　　$('#send').click(function(){

   　　　　　　　　 　 //请求的5个阶段，对应readyState的值
       　　　　　　　　 //0: 未初始化，send方法未调用；
       　　　　　　　　 //1: 正在发送请求，send方法已调用；
        　　　　　　　　//2: 请求发送完毕，send方法执行完毕；
        　　　　　　　　//3: 正在解析响应内容；
        　　　　　　　　//4: 响应内容解析完毕；
　　　　　　 var data = 'name=yang';
    　　　　　var xhr = new XMLHttpRequest();        　　　  //创建一个ajax对象
    　　　　　xhr.onreadystatechange = function(event){    //对ajax对象进行监听
       　　　　　　if(xhr.readyState == 4){    　　　　　　　 //4表示解析完毕
           　　　　　　　if(xhr.status == 200){    　　　　　　 //200为正常返回
                　　　　　　　　console.log(xhr)
            　　　　　　　}
        　　　　　　}
   　　　　　 };
    　　　　　xhr.open('POST','url',true);    　//建立连接，参数一：发送方式，二：请求地址，三：是否异步，true为异步
    　　　　　xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');  //可有可无
    　　　　　xhr.send(data);        　　　　　//发送
　　　　});

 

 

 

　　七、跨域：

　　　　同域:1>.协议名不同(http/https)、2>.域名不同(127.0.01/localhost)、3>.端口号不同(3000/63342)，三者只要有一个不一样，就会发生跨域。

　　八、实现跨域：　　　　

　　　　　　1.JSONP: (解决跨域请求的一种方式)JOSN with Padding,

　　　　　　　缺点：只支持get请求(script只能发送get请求)，不支持post请求

　　　　　　　操作：客户端：路径：http://localhost:3000/test?callback=? url?callback=?

　　　　　　　回调函数：function(result){result.data}

　　　　　　　服务器端： var callback = req.query.callback;

　　　　　　　var result = 'abc;

　　　　　　　result = {data : result};

　　　　　　　var json = JSON.stringify(result);

　　　　　　　返回的数据要封装成json;(res.send(callback + '(' + json + ')');)

　　　　　　　res.send(callback+'('+json+')');

　　　　　　　原理:使用<srcipt>发送请求，利用script的src属性，

　　　　　　　<script type="text/javascript">

　　　　　　　　　function cb(data){

    　　　　　　　 　　document.getElementById('resultSpan').innerHTML = data.result;

　　　　　　　　　}

　　　　　　　<script type="text/javascript" src="http://localhost:3000/ajax_node/test/checkname_jsonp?callback=cb&username=admin?"></script>

　　　　　　　本质： 动态的生成<script>标签，然后通过标签的src属性发送GET类型的跨域请求，服务器端返回一段js脚本，这段js脚的内容为一个函数的调用，实参为需要返回的响应数据(json)。

　　　　　　　客户端这边需要提前定义好对应的函数，当<script>请求成功并接收到数据时，会自动调用此函数，在函数中，我们就可以处理数据了。

　　　　　　2.CORS:Cross-Origin Resource Sharing(跨域资源共享)

　　　　　　　　优点： 支持get请求，也支持post请求

　　　　　　　　缺点： 存在一些兼容性问题

　　　　　　　　操作： 客户端：不需要做任何工作

　　　　　　　　服务器端：只需要发送一个响应表头即可

　　　　　　　　res.set('Access-Control-Allow-Origin', '*');

　　九.jQuery的ajax参数：

　　　　

参数名	类型	描述
url	String	(默认: 当前页地址) 发送请求的地址。
type	String	(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。 注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
timeout	Number	设置请求超时时间（毫秒）。此设置将覆盖全局设置。
async	Boolean	(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。 注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend	Function	发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
cache	Boolean	(默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。 function(XMLHttpRequest) 　　{console.log(XMLHttpRequest) }
complete	Function	请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。 function(XMLHttpRequest, textStatus){ 　　console.log(XMLHttpRequest, textStatus) }
contentType	String	(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data	Object,String	发送到服务器的数据。将自动转换为请求字符串格式。 GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。 如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为foo=bar1&foo=bar2。
dataType	String	预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递， 可用值:　 　　"xml": 返回 XML 文档，可用 jQuery 处理。 　　"html": 返回纯文本 HTML 信息；包含 script 元素。 　　"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 　　"json": 返回 JSON 数据 。 　　"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
success	Function	请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态。function(data){console.log(data)};
error	Function	(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。 这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。function(error){console.log(error)}
global	Boolean	(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件。
processData	Boolean	(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。 如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

　　　　　

　　　　　　Demo:(jQuery的ajax)

　　　　　　　　$.ajax({

    　　　　　　　　url:'/comm/test1.php',
    　　　　　　　　type:'POST', 　　　　　　　　　　　　　　　　　　//GET
   　　　　　　　　 async:true,   　　　　　　　　　　　　　　　　　　//或false,是否异步
    　　　　　　　　data:{　　　　　　　　　　　　　　　　　　　　　//发送数据
       　　　　　　　　name:'yang',age:25
    　　　　　　　　},
    　　　　　　　　timeout:5000,   　　　　 　　　　　　　　　　　　//超时时间
    　　　　　　　　dataType:'json',   　　　 　　　　　　　　　　　　//返回的数据格式：json/xml/html/script/jsonp/text
    　　　　　　　　beforeSend:function(xhr){　　　 　　　　　　　　//发请求前修改 XMLHttpRequest对象的函数
        　　　　　　　　console.log(xhr)
        　　　　　　　　console.log('发送前')
    　　　　　　　　},
    　　　　　　　　success:function(data,textStatus,jqXHR){　　　　//请求成功的函数
        　　　　　　　　console.log(data)
        　　　　　　　　console.log(textStatus)
        　　　　　　　　console.log(jqXHR)
    　　　　　　　　},
    　　　　　　　　error:function(xhr,textStatus){　　　　　　　　　//请求失败的函数
        　　　　　　　　console.log('错误')
        　　　　　　　　console.log(xhr)
        　　　　　　　　console.log(textStatus)
    　　　　　　　　},
    　　　　　　　　complete:function(){　　　　　　　　　　　　　//请求完成后的函数，不论失败还是成功
        　　　　　　　　console.log('结束')
    　　　　　　　　}
　　　　　　　　})