第20天,Ajax

简介: AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。

AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。现在基本都用JSON进行交换数据。

同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。

AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新;(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

Ajax的优点:

  • AJAX使用Javascript技术向服务器发送异步请求;
  • AJAX无须刷新整个页面;
  • 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高;

jQuery实现的Ajax

点击参考

回调函数

如果要处理$.ajax()得到的数据,则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

  • beforeSend 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数

  • error 在请求出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)。

  • dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。

  • success 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。

  • complete 当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。

数据类型

通过dataType选项可以指定其他不同数据处理方式。常用的有json、jsonp、和XML。注意,JSONP是JSON格式的扩展。他要求一些服务器端的代码来检测并处理查询字符串参数。

发送数据到服务器

默认情况下,Ajax请求使用GET方法。如果要使用POST方法,可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。

data选项既可以包含一个查询字符串,比如 key1=value1&key2=value2 ,也可以是一个映射,比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式,则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置processData选项为false来回避。如果我们希望发送一个XML对象给服务器时,这种处理可能并不合适。并且在这种情况下,我们也应当改变contentType选项的值,用其他合适的MIME类型来取代默认的 application/x-www-form-urlencoded 。

语法

$.ajax(url,[settings])

参数:

  • url : 一个用来包含发送请求的URL字符串;
  • settings : Ajax请求设置,所有选项都是可选的。

settings常用选项:

  • url : 发送请求的地址。(String)
  • type : (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。(String)
  • data : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。(Object,String)。
  • dataType:预期服务器返回的数据类型。"json": 返回 JSON 数据 。回调函数中就可以直接使用JSON数据,而不需要先通过JSON.parse()解析。
  • success(data, textStatus, jqXHR):请求成功后的回调函数。参数:由服务器返回,并根据dataType参数进行处理后的数据;描述状态的字符串。
  • error:请求失败时调用此函数。

示例1:

<script>
      //$.ajax的两种使用方式:

      //$.ajax(settings);
      //$.ajax(url,[settings]);


       $(".send_Ajax").click(function(){

           $.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"Yuan",password:123},

               success:function(data){
                   alert(data)
               },

                 //=================== error============

                error: function (jqXHR, textStatus, err) {

                        // jqXHR: jQuery增强的xhr
                        // textStatus: 请求完成状态
                        // err: 底层通过throw抛出的异常对象,值与错误类型有关
                        console.log(arguments);
                    },

                 //=================== complete============

                complete: function (jqXHR, textStatus) {
                    // jqXHR: jQuery增强的xhr
                    // textStatus: 请求完成状态 success | error
                    console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
                    console.log('textStatus: %s', textStatus);
                },

                //=================== statusCode============
                statusCode: {
                    '403': function (jqXHR, textStatus, err) {
                        console.log(arguments);  //注意:后端模拟errror方式:HttpResponse.status_code=500
                     },

                    '400': function () {
                    }
                }

           })

       })

</script>

示例2:

$.ajax('register.html',{
                        type: 'post',
                        data: $("#f1").serialize(),
                        success: function(response_data){
                            var flag=JSON.parse(response_data);
                            if (flag['stat']){
                                location.href='/registsuccess/?username='+flag["username"]
                            }
                        }
                    });

$("#f1").serialize() : f1是form标签的id,serialize()会自动收集form表单中的数据,并组成类似“user=alex&pwd=123”这样的字符串。
response_data : 回调函数中的参数,这是服务器返回的数据,如果设置了dataType,则返回的数据就是dataType设置的数据类型。假如设置dataType:"json",那么回传的数据会经过jQuery内部处理成json格式的数据,可以直接使用,而不再需要通过JSON.parse(data)处理了。

jquery ajax 中 $(this) 不起作用的解决方法

第一种解决办法,在回调函数外部先将$(this)赋值给一个变量:_this=$(this),然后在ajax的回调函数中直接使用_this操作当前标签。

第二种解决办法,如果一定要在ajax的回调函数中使用$(this)操作当前标签,那就需要用bind(this)绑定this到回调函数。如:success: function(){ ... }.bind(this)

相关文章
|
6月前
|
XML JSON 前端开发
什么是ajax,ajax有什么特点?
什么是ajax,ajax有什么特点?
49 0
|
6月前
|
JSON 前端开发 JavaScript
实现ajax
实现ajax
34 0
|
6月前
|
XML 前端开发 JavaScript
什么是ajax?
什么是ajax?
79 0
|
XML 前端开发 JavaScript
24JavaWeb基础 - AJAX介绍
24JavaWeb基础 - AJAX介绍
58 0
|
JSON 前端开发 JavaScript
什么是ajax
ajax不是一种开发语言,它是在现有的js/html/css样式基础上,实现在不重新加载整个页面的情况下,与服务器进行简单的数据交互,通过js操作DOM进行页面局部更新
122 0
|
前端开发 JavaScript 小程序
ajax中使用总结
ajax中使用总结
123 0
ajax中使用总结
|
XML 前端开发 JavaScript
|
XML JSON 前端开发
|
XML JSON 前端开发
Ajax介绍
ajax 是 Asynchronous JavaScript and XML的简写,ajax一个前后台配合的技术,它可以让 javascript 发送异步的 http 请求,与后台通信进行数据的获取,ajax 最大的优点是实现局部刷新,ajax可以发送http请求,当获取到后台数据的时候更新页面显示数据实现局部刷新,在这里大家只需要记住,当前端页面想和后台服务器进行数据交互就可以使用ajax了。
226 0
|
Web App开发 安全 前端开发
ajax的使用
  如上一张表单提交,一般我们通常的做法是,form表单提交,方便快捷,提交以后就不用管了,是否完成以及完成以后做什么是提交以后的后台操作,form表单只负责提交过去。(一般后台在接收表单提交以后,根据验证以及数据流转结果给前台交互,常见的是 重定向)。
1150 0