首页 > > 网络编程 > 其它 >

AJAX

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

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学习之旅（一）

Django和前端用ajax传输json等数据 2019-08-13
Django之Ajax文件上传 2019-03-10
Django之基于iframe的ajax伪造 2018-11-22
python反爬之网页局部刷新1 2018-11-20
django+ajax用FileResponse文件下载到浏览器过程中遇到的问 2018-09-18

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签