AJAX

2018-11-12 06:53:29来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

AJAX

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

简单来讲ajax完成的是局部刷新与异步交互。
举例:

  • 搜索引擎搜索框输入字符后下边显示可能要搜索的内容;
  • 注册账号是显示昵称是否被使用

AJAX使用步骤

  • 1.创建XMLHTTPRequest对象
  • 2.open打开与服务器的连接
  • 3.向服务器端发送请求
  • 4.监听服务器发送回的响应

AJAX实现过程

1.一个简单的html页面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="func();">ajax发送</button>
</body>
</html>

2.创建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;
    }

3.open打开与服务器的连接

open函数有三个参数:

  • 提交方式,如GET,POST
  • url,get请求的的话可在后边加信息
  • 一个bool值,表示是否使用异步请求,默认true

var xmlHttp = createXMLHttpRequest();
xmlHttp.open("POST", "/ajax_test/", true);

3.向服务端发送请求

post请求,发送的是个字符串,相当于post请求中的键值

xmlHttp.send("massage=ajax&username=sfencs")

get请求,由于get请求数据在url上,但send函数参数不能为空,所以

xmlHttp.send(null);

4.监听服务器响应

XMLHttpRequest对象在使用的时候有5种状态,每个状态对应着一个值:

  • 0:只是创建了XMLHttpRequest对象,还未调用open()方法;
  • 1:open()方法已调用,但还没调用send()方法
  • 2:send()方法已调用
  • 3:开始读取服务器响应
  • 4:读取服务器响应结束

XMLHttpRequest对象有一个onreadystatechange事件,可以监听这五个状态,它会在XMLHttpRequest对象的状态发生变化时被调用
xmlHttp.readyState属性中存放在此时的状态值
通过以上内容,我们可以监听到来自服务器的响应


xmlHttp.onreadystatechange= function(){
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            var ele=document.getElementById('content');
            ele.innerText=xmlHttp.responseText;

        }
}

其中xmlHttp.responseText是客户端Httpresponse返回的内容,xmlHttp.status为服务器响应状态码

5.完整代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="func()">ajax发送</button>
<span id="content"></span>
</body>
</html>
<script>

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

function func() {

    var xmlHttp = createXMLHttpRequest();
    xmlHttp.onreadystatechange= function(){
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                var ele=document.getElementById('content');
                ele.innerText=xmlHttp.responseText;
            }
    }
    xmlHttp.open("POST", "/handle_ajax/", true); 
     xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
    xmlHttp.send('message=ajax&username=sfencs');
}
</script>
//django view函数
def ajax_test(request):

    return render(request, 'ajax_test.html')
@csrf_exempt
def handle_ajax(request):
    print(request.POST)
    return HttpResponse('ajax回复')

6.注意事项

  • 1.监听函数xmlHttp.onreadystatechange必须要放在xmlHttp对象创建之后,中间不能有其他内容,否则xmlHttp对象就像是不起作用了一样,前后端都不会有响应。
  • 2.post请求需要设置请求头信息xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”),否则服务器端会忽略请求体中的数据
  • 3.csrf防御
    由于django默认post提交都会有csrf认证,需要添加CSRF token所以有两种解决方式
    在djangoviews函数中添加免除csrf跨站保护
    ```python

from django.views.decorators.csrf import csrf_exempt

然后给视图函数添加装饰器@csrf_exempt
或者
在js中添加
```javascript
$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});

为每个ajax访问添加csrf_token

jquery实现ajax

引入jquery可以将文件放到一个static文件夹中,并在settings中添加


STATIC_URL = '/static/'
STATICFILES_DIRS=(
    os.path.join(BASE_DIR,'static'),
)

1.$.get $.post

顾名思义,这两种方法是post方式和get方式,它们两者使用的方式是基本相同的。
参数为(url, [data], [callback], [type])
url表示发送路径,data表示发送的数据用字典存放,字典的键不用加引号,callback为回调函数的名称也可以直接使用匿名函数,type表示要从服务器端收到的数据类型,有text|html|json|script,规定了返回数据的类型后,如果服务器发送的不是这种类型,那么不会执行回调函数
将上一节中的func函数改为如下

function func() {   
$.post("/handle_ajax/",{message:'aiax'},

function (back_data,status,xmlHttp) {
    var ele=document.getElementById('content');
    ele.innerText=back_data;
    }


    )
}

这里回调函数中有三个形参,第一个为服务器返回的数据,第二个为状态信息,success或者是error,第三个就是XMLHTTPRequest对象,众多信息都存放在对象中
至于$.get,基本和post相同,只是传送的数据可以加到url后,一般还是把要传送的数据放到data中,这样可以避免编码问题。

2.$.getScript

通过 AJAX 请求来获得并运行一个 JavaScript 文件,即可以根据需要来决定是否引入


$.getScript("test.js", function(){   alert("Script loaded and executed."); });

jquery1.2版本后可以跨域调用js文件

3.$.getJSON

相当于$.get()最后一个参数为json

4.$.ajax

上述的方法都是相当于$.ajax的简写
$.ajax的参数有很多

  • async 参数类型Boolean,表示是否为异步请求,默认true
  • contentType 类型:String默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。
  • context 类型:Object 让回调函数内 this 指向这个对象,比如document.body,那么在回调函数中,$(this)就是这个对象
  • data 类型为字典Key/Value格式,发送到服务器的数据
  • dataType 预期服务器返回的数据类型
  • processData data中会将自动转换为请求字符串格式,processData默认为true,若不想将数据进行转换,知识发送原数据,可以将其设置为false
  • type string类型,表示请求方式
  • url 发送的地址
  • 等等

回调函数:

  • beforeSend 参数类型函数,发送请求前可修改 XMLHttpRequest 对象的函数,XMLHttpRequest 对象是唯一的参数
  • error 在请求出错时调用。传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话)error: function (jqXHR, textStatus, err){}
  • dataFilter 类型:Function 表示对ajax返回的数据进行预处理,有data和type两个参数,data为返回的原始数据,type为datatype参数,比如收到的是json类型,那么在预处理中tmp = JSON.parse(data)
  • success 请求成功后调用,传入返回后的数据,以及包含成功代码的字符串success: function (data,str){}
  • complete 无论请求成功与否,最后都会调用传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串complete: function (jqXHR, textStatus){}

一个简单的ajax实现


$.ajax({
    url:'/handle_ajax/',
    data:{message:'ajax'},
    type:'post',
    success:function (data) {
        var ele=document.getElementById('content');
          ele.innerText=data;
    }
    }
)

5.json

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.
这里有json字符串和json对象两个概念
json字符串就是数据交换传输的信息格式,json对象其实是javascript对象的子集
数据传输或转换时,先将原数据转换成json字符串,使用时再将json字符串转换成json对象或者其他语言的数据格式

python与json对象的对应
python -->     json
        dict               object
        list,tuple         array
        str,unicode        string
        int,long,float     number
        True                true
        False               false
        None                null
json字符串的的格式
  • 数字 (整数或浮点数)
  • 字符串 (在双引号中)
  • 逻辑值 (true 或 false)
  • 数组 (在方括号中)
  • 对象 (在花括号中,引号用双引)
  • null

json字符串中的引号都为双引号

js中的JSON.parse()与JSON.stringify()

JSON.parse()将json字符串转换为json对象,JSON.stringify()将json对象转换为json字符串

ajax完成json数据发送

$.ajax({
    url:'/handle_ajax/',
    data:{message:'ajax'},
    type:'post',
    success:function (data) {
        var ele=document.getElementById('content');
        var ret=JSON.parse(data)
          ele.innerText=ret.name;
    }
    }
)

def handle_ajax(request):
    print(request.POST)

    dic={'name':'sfencs'}
    message=json.dumps(dic)

    return HttpResponse(message)
?

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:用python搜索模糊文件

下一篇:Python学习之旅(一)