AJax技术

深入理解ajax系列第九篇(3)

字号+ 作者:H5之家 来源:H5之家 2017-03-29 09:04 我要评论( )

$dataArr = $(‘form‘ ).serializeArray();$html = ‘‘ ;$.each($dataArr, function (i,data){$html += data.name + ‘:‘ + data.value + ‘;‘ ;})console.log($html); // a:1;b:2;c:3;d:4;e:5; ajax() 前面介

$dataArr = $(‘form‘).serializeArray(); $html = ‘‘; $.each($dataArr,function(i,data){ $html += data.name + ‘:‘ + data.value + ‘;‘; }) console.log($html);//a:1;b:2;c:3;d:4;e:5;

 

ajax()

  前面介绍的load()、get()、post()、getScript()、getJSON()等方法都是基于ajax()方法实现的

  ajax()方法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下:

$.ajax([settings])

  其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get  

  常用参数如下所示

名称 值/描述 async 布尔值,表示请求是否异步处理。默认是 true。 beforeSend(xhr) 发送请求前运行的函数。 cache 布尔值,表示浏览器是否缓存被请求页面。默认是 true。 complete(xhr,status) 请求完成时运行的函数(在请求成功或失败之后均调用,即在success和error函数之后) contentType 发送数据时使用的内容类型。默认是"application/x-www-form-urlencoded" context 为所有 AJAX 相关的回调函数规定 "this" 值。 data 规定要发送到服务器的数据。 dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。 dataType 预期的服务器响应的数据类型。 error(xhr,status,error) 如果请求失败要运行的函数。 global 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 ifModified 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 jsonp 在一个 jsonp 中重写回调函数的字符串。 jsonpCallback 在一个 jsonp 中规定回调函数的名称。 password 规定在 HTTP 访问认证请求中使用的密码。 processData 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。 scriptCharset 规定请求的字符集。 success(result,status,xhr) 当请求成功时运行的函数。 timeout 设置本地的请求超时时间(以毫秒计)。 traditional 布尔值,规定是否使用参数序列化的传统样式。 type 规定请求的类型(GET 或 POST)。 url 规定发送请求的 URL。默认是当前页面。 username 规定在 HTTP 访问认证请求中使用的用户名。 xhr 用于创建 XMLHttpRequest 对象的函数。

<!-- 前端页面 --> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <button>测试</button> <div></div> <script> $(‘#send‘).click(function(){ $.ajax({ url:‘jqRequest.php‘, type:‘POST‘, data:{ num:$(‘#num‘).val() }, success:function(data){ $(‘#result‘).html(‘您选择的数字‘ + $(‘#num‘).val() + ‘是‘ + data); } }) }) </script> <!-- 后端页面 --> <?php $num = $_REQUEST[‘num‘]; if($num % 2 == 0){ echo ‘偶数‘; }else{ echo ‘奇数‘; } ?>

全局事件

  jQuery简化ajax操作不仅体现在调用ajax方法和处理响应方面,而且还体现在对调用ajax方法的过程中的HTTP请求的控制。通过jQuery提供的一些自定义全局函数,能够为各种与ajax相关的事件注册回调函数。例如,当ajax请求开始时,会触发ajaxStart()方法的回调函数;当ajax请求结束时,会触发ajaxStop()的回调函数。这些方法都是全局的方法,因此无论创建它们的代码位于何处,只要有ajax请求发生,就会触发它们

【ajaxSetup()】

  ajaxSetup()方法为以后要用到的Ajax请求设置默认的值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为:

$.ajaxSetup([options])

  例如,设置 AJAX 请求默认地址为 "/xmlhttp/",用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数

$.ajaxSetup({ url: "/xmlhttp/", type: "POST" }); $.ajax({ data: myData });

  如果想让某个ajax请求不受ajaxSetup()方法的影响,可以在使用ajax()方法时,将参数中的global设置为false

$.ajaxSetup({ url: "/xmlhttp/", type: "POST" }); $.ajax({ global:false, url:"test", type:‘GET‘ })

【ajaxStart()和ajaxStop()】

  ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为

$(selector).ajaxStart(function()) $(selector).ajaxStop(function())

  [注意]从 jQuery 1.8 开始, ajaxStart()和ajaxStop()方法只能绑定到 document元素

  例如,读取远程网站的图片速度可能会比较慢,如果在加载的过程中,不给用户提供一些提示和反馈信息,很容易让用户误认为按钮单击无用,使用户对网站失去信心。这时,ajaxStart()和ajaxStop()方法就派上用场了

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • SpringMvc的ajax

    SpringMvc的ajax

    2017-03-29 12:01

  • 为什么说setTimeout和ajax原理是一样的?

    为什么说setTimeout和ajax原理是一样的?

    2017-03-29 09:00

  • jQuery Ajax,jqueryajax

    jQuery Ajax,jqueryajax

    2017-03-29 08:01

  • struts2 https ajax案例

    struts2 https ajax案例

    2017-03-29 08:00

网友点评
i