一、底层接口 jQuery.ajax( )
①jQuery.ajax( url [, settings ] )
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <script> $.ajax('test.php',{ type:'GET', success: function(reg){ console.log(reg);//1530065070 //reg拿到的是响应体 } }) </script>
②jQuery.ajax( [settings ] )
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $.ajax({ url: 'test.php',//请求地址 type: 'get',//请求方法 dataType: 'json',//服务端响应数据类型,跟data没有关系 data: {id:1},//请求参数 beforeSend: function(xhr){//请求发去之前触发 console.log('before send') }, success: function(data){//请求成功之后触发(响应状态码200) console.log(data); //data会自动根据服务端响应的Content-Type 自动转为对象 //dataType一旦设置就不再关心服务端响应的Content-Type //客户端会主观认为服务端返回的是就是json格式的字符串 }, error: function(err){//请求失败触发(响应状态码不为200) console.log(err) }, complete: function(){//请求完成触发(不管成功与否) console.log('request completed') } }) </script>
二、使用一个HTTP GET请求从服务器加载数据 jQuery.get( )
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <script> /**jQuery.get( url [, data ] [, success( ) ] [, dataType ] ) *url 一个包含发送请求的URL字符串 *data 发送给服务器的字符串或Key/value键值对 *success() 当请求成功后执行的回调函数 *dataType 从服务器返回的预期的数据类型。默认：智能猜测（xml, json, script, 或 html）。 */ $.get('test.php',{id:1},function(res){ console.log(res);//1530065738 }) </script>
三、使用一个HTTP POST 请求从服务器加载数据 jQuery.post( )
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <script> /**jQuery.post( url [, data ] [, success( ) ] [, dataType ] ) *url 一个包含发送请求的URL字符串 *data 发送给服务器的字符串或Key/value键值对 *success() 当请求成功后执行的回调函数 *dataType 从服务器返回的预期的数据类型。默认：智能猜测（xml, json, script, 或 html）。 */ $.post('test.php',{key1:'value1',key2:'value2'},function(res){ console.log(res);//1530066053 }) </script>
四、使用一个HTTP GET请求从服务器加载JSON编码的数据 jQuery.getJSON( )
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <script> /**jQuery.getJSON( url [, data ] [, success() ] ) *url 一个包含发送请求的URL字符串 *data 发送给服务器的字符串或Key/value键值对 *success() 当请求成功后执行的回调函数 * * test.php文件: * <?php * $arr=array('name'=>'eric','gender'=>'男'); * $json=json_encode($arr); * echo $json; * ?> */ $.getJSON('test.php',{key1:'value1'},function(res){ console.log(res.name+":"+res.gender);//eric:男 }) </script>
五、使用一个HTTP GET请求从服务器加载并执行一个 JavaScript 文件 jQuery.getScript( )
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <script> /**jQuery.getScript( url [, success() ] ) *url 一个包含发送请求的URL字符串 *success() 当请求成功后执行的回调函数 * * test.js文件: * console.log('js文件已经执行'); */ $.getScript('test.js',function(){ console.log('回调函数已经执行'); }) //控制台输出: //js文件已经执行 //回调函数已经执行 </script>
六、从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素 中 jquery（selector）.load( )
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <div id="demo" style=" 300px;height: 300px;background: #ccc;"></div> <script> /**.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] ) *url 一个包含发送请求的URL字符串 *data 向服务器发送请求的Key/value参数，例如{name:"",age:23} *complete() 当请求成功后执行的回调函数 * * jQuery使用浏览器的.innerHTML属性去解析检索到的文档，并将其插入到当前文档中。 *在此过程中，浏览器通常会过滤文档中的一些元素 ，比如<html>, <title>, 或者 <head> 元素。 *其结果是，由.load()方法返回的元素与从浏览器中直接获取到的文档内容，可能是并不完全一样的。 * * demo.html有一个类名为demo宽高100的黑色div和一个类名为demo1宽高100的白色div */ $("#demo").load('demo.html .main',{id:1},function(responseText,textStatus,XMLHttpRequest){ console.log(responseText); console.log(textStatus); console.log(XMLHttpRequest); }) </script>
七、jQuery全局处理函数
①这些方法用于注册事件处理器，用来处理页面上的任何 Ajax 请求，当某些事件触发后，这些事件处理器被调用。
②如何 jQuery.ajaxSetup() 中的 global 属性被设置为 true （这也是默认设置），那么，每个 Ajax 请求都会触发全局事件。
③注意：全局事件绝对不会被跨域（cross-domain）脚本或 JSONP 请求触发，和 global 属性的设置毫无关系。
④包括:
- $.ajaxStart() 在AJAX 请求刚开始时执行一个处理函数。 这是一个 Ajax Event.
- $.ajaxStop() 在AJAX 请求完成时执行一个处理函数。 这是一个 Ajax Event。
- $.ajaxSend() 在Ajax请求发送之前绑定一个要执行的函数，这是一个 Ajax Event.
- $.ajaxSuccess() 绑定一个函数当 Ajax 请求成功完成时执行。 这是一个Ajax Event.
- $.ajaxError() Ajax请求出错时注册一个回调处理函数，这是一个 Ajax Event。
- $.ajaxComplete() 当Ajax请求完成后注册一个回调函数。这是一个 AjaxEvent
八、进度条插件 nprogress
