Ajax的介绍与实现方法

发表于 | 分类于 | | 阅读次数:

AJAX翻译成中文就是“异步+Javascript+XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

Ajax特点

1.异步传输

同步与异步的区别

  • 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

  • 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

2.局部刷新

并不是重新加载全部页面，仅仅加载需要加载的那一部分。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

应用场景举例

1.在百度搜索栏输入内容，会自动弹出联想输入内容提示：

mark

2.注册账号的时候，输入已存在的用户名会给与提示：
mark

Ajax的优缺点

优点

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

缺点

  • AJAX并不适合所有场景，很多时候还是要使用同步交互；
  • AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
  • 因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

Ajax代码实现

基于js的ajax

AJAX核心（XMLHttpRequest）

其实AJAX就是在Javascript中多添加了一个对象：XMLHttpRequest对象。所有的异步交互都是使用XMLHttpServlet对象完成的。也就是说，我们只需要学习一个Javascript的新对象即可。

var xmlHttp = new XMLHttpRequest()；//（大多数浏览器都支持DOM2规范）

注意：
各个浏览器对XMLHttpRequest的支持也是不同的！为了处理浏览器兼容问题，给出下面方法来创建XMLHttpRequest对象：

function createXMLHttpRequest() {
        var xmlHttp;
        // 适用于大多数浏览器，以及IE7和IE更高版本
        try{
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            // 适用于IE6
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                // 适用于IE5.5，以及IE更早版本
                try{
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){}
            }
        }            
        return xmlHttp;
    }

实现流程

步骤1: 打开与服务器的连接（open方法）

当得到XMLHttpRequest对象后，就可以调用该对象的open()方法打开与服务器的连接了。open()方法的参数如下：

open(method, url, async)：

method：请求方式，通常为GET或POST；
url：请求的服务器地址，例如：/ajaxdemo1/AServlet，若为GET请求，还可以在URL后追加参数；
async：这个参数可以不给，默认值为true，表示异步请求；

var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "/ajax_get/", true);
步骤2: 发送请求

当使用open打开连接后，就可以调用XMLHttpRequest对象的send()方法发送请求了。send()方法的参数为POST请求参数，即对应HTTP协议的请求体内容，若是GET请求，需要在URL后连接参数。

注意：
若没有参数，需要给出null为参数！若不给出null为参数，可能会导致FireFox浏览器不能正常发送请求！

xmlHttp.send(null);
步骤3: 接收服务器响应

当请求发送出去后，服务器端就开始执行了，但服务器端的响应还没有接收到。接下来我们来接收服务器的响应。

XMLHttpRequest对象有一个onreadystatechange事件，它会在XMLHttpRequest对象的状态发生变化时被调用。下面介绍一下XMLHttpRequest对象的5种状态：

0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法；
1：请求已开始，open()方法已调用，但还没调用send()方法；
2：请求发送完成状态，send()方法已调用；
3：开始读取服务器响应；
4：读取服务器响应结束。

onreadystatechange事件会在状态为1、2、3、4时引发。

下面代码会被执行四次！对应XMLHttpRequest的四种状态！

xmlHttp.onreadystatechange = function() {
            alert('hello');
        };

但通常我们只关心最后一种状态，即读取服务器响应结束时，客户端才会做出改变。我们可以通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4) {
                alert('hello');    
            }
        };

其实我们还要关心服务器响应的状态码是否为200，其服务器响应为404，或500，那么就表示请求失败了。我们可以通过XMLHttpRequest对象的status属性得到服务器的状态码。

最后，我们还需要获取到服务器响应的内容，可以通过XMLHttpRequest对象的responseText得到服务器响应内容。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                alert(xmlHttp.responseText);    
            }
        };
if 发送POST请求

<1>需要设置请求头：

xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)；

注意 :
form表单会默认这个键值对不设定，Web服务器会忽略请求体的内容。

<2>在发送时可以指定请求体了：xmlHttp.send(“username=yuan&password=123”)

测试代码

点击查看代码
<h1>AJAX</h1>
<button onclick="send()">测试</button>
<div id="div1"></div>


<script>
       function createXMLHttpRequest() {
            try {
                return new XMLHttpRequest();//大多数浏览器
            } catch (e) {
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
        }

        function send() {
            var xmlHttp = createXMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    var div = document.getElementById("div1");
                    div.innerText = xmlHttp.responseText;
                    div.textContent = xmlHttp.responseText;
                }
            };

            xmlHttp.open("POST", "/ajax_post/", true);
            //post: xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlHttp.send(null);  //post: xmlHttp.send("b=B");
        }


</script>
       
#--------------------------------views.py 
from django.views.decorators.csrf import csrf_exempt

def login(request):
    print('hello ajax')
    return render(request,'index.html')

@csrf_exempt   ＃csrf防御
def ajax_post(request):
    print('ok')
    return HttpResponse('helloyuanhao')

基于jquery的ajax

所有方法详情查看菜单中的附录。

点击查看代码
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static 'JS/jquery-3.1.1.js' %}"></script>
</head>
<body>

<button class="send_Ajax">send_Ajax</button>

<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>
</body>
</html>

$.ajax方法


这里仅介绍重点的几个参数，详细的参数，可以点开隐藏的参数表。
点击查看参数表
参数表
名称 值/描述
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 对象的函数。

请求参数

  • data
    当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式(urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。

    function testData() {
      $.ajax("/test",{     //此时的data是一个json形式的对象
         data:{
           a:1,
           b:2
         }
      });                   //?a=1&b=2

  • processData
    声明当前的data数据是否进行转码或预处理，默认为true，即预处理；
    if为false，那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString() ,最后得到一个［object，Object］形式的结果。

  • contentType
    默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。
    用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，
    比如contentType:”application/json”，即向服务器发送一个json字符串：

    $.ajax("/ajax_get",{
             
                  data:JSON.stringify({
                       a:22,
                       b:33
                   }),
                   contentType:"application/json",
                   type:"POST",
             
               });                          //{a: 22, b: 33}

注意：contentType:”application/json”一旦设定，data必须是json字符串，不能是json对象

  • traditional
    一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},
    traditional为false会对数据进行深层次迭代；
响应参数
  • dataType
    预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后，传递给回调函数。
    默认不需要显性指定这个属性，ajax会根据服务器返回的content Type来进行转换；
    比如我们的服务器响应的content Type为json格式，这时ajax方法就会对响应的内容进行一个json格式的转换，if转换成功，我们在success的回调函数里就会得到一个json格式的对象；转换失败就会触发error这个回调函数。
    如果我们明确地指定目标类型，就可以使用data Type。

-dataType的可用值

html｜xml｜json｜text｜script

dataType实例
点击查看代码
from django.shortcuts import render,HttpResponse
from django.views.decorators.csrf import csrf_exempt
# Create your views here.

import json

def login(request):

    return render(request,'Ajax.html')


def ajax_get(request):

    l=['alex','little alex']
    dic={"name":"alex","pwd":123}

    #return HttpResponse(l)      #元素直接转成字符串alexlittle alex
    #return HttpResponse(dic)    #字典的键直接转成字符串namepwd
    return HttpResponse(json.dumps(l))
    return HttpResponse(json.dumps(dic))# 传到前端的是json字符串,要想使用,需要JSON.parse(data)

//---------------------------------------------------
    function testData() {

        $.ajax('ajax_get', {
           success: function (data) {
           console.log(data);
           console.log(typeof(data));
           //console.log(data.name);
           //JSON.parse(data);
           //console.log(data.name);
                                     },
           //dataType:"json",
                            }
                       )}

注解:
Response Headers的content Type为text/html,所以返回的是String;但如果我们想要一个json对象,设定dataType:"json"即可,相当于告诉ajax方法把服务器返回的数据转成json对象发送到前端.结果为object。
当然，return HttpResponse(json.dumps(a),content_type="application/json")
这样就不需要设定dataType:"json"了。
content_type="application/json"和content_type="json"是一样的！

实例-用户名是否已被注册

功能介绍

在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回true或false，返回true表示这个用户名已经被注册过，返回false表示没有注册过。

客户端得到服务器返回的结果后，确定是否在用户名文本框后显示“用户名已被注册”的错误信息！

案例分析

页面中给出注册表单；
在username表单字段中添加onblur事件，调用send()方法；
send()方法获取username表单字段的内容，向服务器发送异步请求，参数为username；
django 的视图函数：获取username参数，判断是否为“yuan”，如果是响应true，否则响应false

参考代码

点击展开代码
<script type="text/javascript">
        function createXMLHttpRequest() {
            try {
                return new XMLHttpRequest();
            } catch (e) {
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
        }

        function send() {
            var xmlHttp = createXMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    if(xmlHttp.responseText == "true") {
                        document.getElementById("error").innerText = "用户名已被注册！";
                        document.getElementById("error").textContent = "用户名已被注册！";
                    } else {
                        document.getElementById("error").innerText = "";
                        document.getElementById("error").textContent = "";
                    }
                }
            };
            xmlHttp.open("POST", "/ajax_check/", true, "json");
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            var username = document.getElementById("username").value;
            xmlHttp.send("username=" + username);
        }
</script>

//--------------------------------------------------index.html

<h1>注册</h1>
<form action="" method="post">
用户名：<input id="username" type="text" name="username" onblur="send()"/><span id="error"></span><br/>
密　码：<input type="text" name="password"/><br/>
<input type="submit" value="注册"/>
</form>


//--------------------------------------------------views.py
from django.views.decorators.csrf import csrf_exempt

def login(request):
    print('hello ajax')
    return render(request,'index.html')
    # return HttpResponse('helloyuanhao')

@csrf_exempt
def ajax_check(request):
    print('ok')

    username=request.POST.get('username',None)
    if username=='yuan':
        return HttpResponse('true')
    return HttpResponse('false')

附录

jquery的ajax所有方法

方法 描述
$.ajax() 执行异步 AJAX 请求
$.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项
$.ajaxSetup() 为将来的 AJAX 请求设置默认值
$.ajaxTransport() 创建处理 Ajax 数据实际传送的对象
$.get() 使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码的数据
$.getScript() 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript
$.param() 创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串）
$.post() 使用 AJAX 的 HTTP POST 请求从服务器加载数据
ajaxComplete() 规定 AJAX 请求完成时运行的函数
ajaxError() 规定 AJAX 请求失败时运行的函数
ajaxSend() 规定 AJAX 请求发送之前运行的函数
ajaxStart() 规定第一个 AJAX 请求开始时运行的函数
ajaxStop() 规定所有的 AJAX 请求完成时运行的函数
ajaxSuccess() 规定 AJAX 请求成功完成时运行的函数
load() 从服务器加载数据，并把返回的数据放置到指定的元素中
serialize() 编码表单元素集为字符串以便提交
serializeArray() 编码表单元素集为names和values的数组
-------------本文结束感谢您的阅读-------------