Ajax

2021-07-01 15:06

阅读:657

YPE html>

标签:com   发送   state   刷新   one   交互   2.4   request对象   定义   

一、概述

对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上。

1、传统的Web应用

一个简单操作需要重新加载全局数据

2.AJAX

AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案。

异步的JavaScript:
使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求,当服务端处理完请求之后,【自动执行某个JavaScript的回调函数】。
PS:以上请求和响应的整个过程是【偷偷】进行的,页面上无任何感知。
XML
XML是一种标记语言,是Ajax在和后台交互时传输数据的格式之一
利用AJAX可以做:
1、注册时,输入用户名自动检测用户是否已经存在。
2、登陆时,提示用户名密码错误
3、删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。

二、伪AJAX

由于HTML标签的iframe标签具有局部加载内容的特性,所以可以使用其来伪造Ajax请求。

技术分享技术分享
 1 
 2 
 3  
 4"en">
 5         "UTF-8">
 6          7     
 8  
 9     
10  
11         
12

请输入要加载的地址:"currentTime">

13

14 "url" type="text" /> 15 "button" value="刷新" onclick="LoadPage();"> 16

17
18 19 20
21

加载页面位置:

22 23
24 25 26 40 41 42
伪AJAX

三、原生AJAX

Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件)。

1.XMLHttpRequest对象介绍

技术分享技术分享
 1 a. void open(String method,String url,Boolen async)
 2    用于创建请求
 3     
 4    参数:
 5        method: 请求方式(字符串类型),如:POST、GET、DELETE...
 6        url:    要请求的地址(字符串类型)
 7        async:  是否异步(布尔类型)
 8  
 9 b. void send(String body)
10     用于发送请求
11  
12     参数:
13         body: 要发送的数据(字符串类型)
14  
15 c. void setRequestHeader(String header,String value)
16     用于设置请求头
17  
18     参数:
19         header: 请求头的key(字符串类型)
20         vlaue:  请求头的value(字符串类型)
21  
22 d. String getAllResponseHeaders()
23     获取所有响应头
24  
25     返回值:
26         响应头数据(字符串类型)
27  
28 e. String getResponseHeader(String header)
29     获取响应头中指定header的值
30  
31     参数:
32         header: 响应头的key(字符串类型)
33  
34     返回值:
35         响应头中指定的header对应的值
36  
37 f. void abort()
38  
39     终止请求
XmlHttpRequest对象的主要方法:
技术分享技术分享
 1 a. Number readyState
 2    状态值(整数)
 3  
 4    详细:
 5       0-未初始化,尚未调用open()方法;
 6       1-启动,调用了open()方法,未调用send()方法;
 7       2-发送,已经调用了send()方法,未接收到响应;
 8       3-接收,已经接收到部分响应数据;
 9       4-完成,已经接收到全部响应数据;
10  
11 b. Function onreadystatechange
12    当readyState的值改变时自动触发执行其对应的函数(回调函数)
13  
14 c. String responseText
15    服务器返回的数据(字符串类型)
16  
17 d. XmlDocument responseXML
18    服务器返回的数据(Xml对象)
19  
20 e. Number states
21    状态码(整数),如:200404...
22  
23 f. String statesText
24    状态文本(字符串),如:OK、NotFound...
XmlHttpRequest对象的主要属性:

2.跨浏览器支持

  • XmlHttpRequest

   IE7+, Firefox, Chrome, Opera, etc.

  • ActiveXObject("Microsoft.XMLHTTP")

     IE6, IE5

技术分享技术分享

"en">
    "UTF-8">
    

XMLHttpRequest - Ajax请求

"button" onclick="XmlGetRequest();" value="Get发送请求" /> "button" onclick="XmlPostRequest();" value="Post发送请求" /> 基于原生AJAX - Demo
基于原生AJAX - Demo

3.jQuery Ajax

jQuery其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能。

  • jQuery 不是生产者,而是大自然搬运工。
  • jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject 

注:2.+版本不再支持IE9以下的浏览器

技术分享技术分享
jQuery.get(...)
                所有参数:
                     url: 待载入页面的URL地址
                    data: 待发送 Key/value 参数。
                 success: 载入成功时回调函数。
                dataType: 返回内容格式,xml, json,  script, text, html


            jQuery.post(...)
                所有参数:
                     url: 待载入页面的URL地址
                    data: 待发送 Key/value 参数
                 success: 载入成功时回调函数
                dataType: 返回内容格式,xml, json,  script, text, html


            jQuery.getJSON(...)
                所有参数:
                     url: 待载入页面的URL地址
                    data: 待发送 Key/value 参数。
                 success: 载入成功时回调函数。


            jQuery.getScript(...)
                所有参数:
                     url: 待载入页面的URL地址
                    data: 待发送 Key/value 参数。
                 success: 载入成功时回调函数。


            jQuery.ajax(...)

                部分参数:

                        url:请求地址
                       type:请求方式,GET、POST(1.9.0之后用method)
                    headers:请求头
                       data:要发送的数据
                contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
                      async:是否异步
                    timeout:设置请求超时时间(毫秒)

                 beforeSend:发送请求前执行的函数(全局)
                   complete:完成之后执行的回调函数(全局)
                    success:成功之后执行的回调函数(全局)
                      error:失败之后执行的回调函数(全局)
                

                    accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型
                   dataType:将服务器端返回的数据转换成指定类型
                                   "xml": 将服务器端返回的内容转换成xml格式
                                  "text": 将服务器端返回的内容转换成普通文本格式
                                  "html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
                                "script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
                                  "json": 将服务器端返回的内容转换成相应的JavaScript对象
                                 "jsonp": JSONP 格式
                                          使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数

                                  如果不指定,jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string

                 converters: 转换器,将服务器端的内容根据指定的dataType转换类型,并传值给success回调函数
                         $.ajax({
                              accepts: {
                                mycustomtype: application/x-some-custom-type
                              },
                              
                              // Expect a `mycustomtype` back from server
                              dataType: mycustomtype

                              // Instructions for how to deserialize a `mycustomtype`
                              converters: {
                                text mycustomtype: function(result) {
                                  // Do Stuff
                                  return newresult;
                                }
                              },
                            });

jQuery Ajax 方法列表
jQuery Ajax使用方法
技术分享技术分享

"en">
    "UTF-8">
    

"button" onclick="XmlSendRequest();" value=Ajax请求 />

基于jQueryAjax - Demo
基于jQueryAjax - Demo

实例:基于以上三种方式实现图片上传

技术分享技术分享
 1 
 2 "en">
 3  4     "UTF-8">
 5      6 
 7 
 8     

原生Ajax上传文件

9 "file" id="i1" /> 10 "upload1();">上传 11
"container1">
12 13

jQuery Ajax上传文件

14 "file" id="i2" /> 15
"upload2();">上传 16
"container2">
17 18

伪Ajax上传文件

19
"/upload/" method="POST" id="f1" target="ifr" enctype="multipart/form-data"> 20 21 "file" name="fafafa" /> 22 "upload3();">上传 23
24
"container3">
25 26 77 78
upload.html
技术分享技术分享
 1 from django.shortcuts import render,HttpResponse
 2 import os
 3 
 4 def upload(request):
 5     if request.method==GET:
 6         return render(request,upload.html)
 7     else:
 8         print(request.POST,request.FILES)
 9         file_obj=request.FILES.get(fafafa)
10         file_path=os.path.join(static,file_obj.name)
11         with open(file_path,wb) as f:
12             for chunk in file_obj.chunks():
13                 f.write(chunk)
14         return HttpResponse(file_path)
views.py

 

Ajax

标签:com   发送   state   刷新   one   交互   2.4   request对象   定义   

原文地址:http://www.cnblogs.com/panyouming/p/7132587.html


评论


亲,登录后才可以留言!