python开发之Ajax

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了python开发之Ajax相关的知识,希望对你有一定的参考价值。

一、概述

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

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

  • 异步的JavaScript: 使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求,当服务端处理完请求之后,【自动执行某个JavaScript的回调函数】。

     PS:以上请求和响应的整个过程是【偷偷】进行的,页面上无任何感知。

  • XML XML是一种标记语言,是Ajax在和后台交互时传输数据的格式之一

  原生Ajax和jQuery Ajax本质就是一个XMLHttpRequest对象

  利用AJAX可以做:

    1、注册时,输入用户名自动检测用户是否已经存在。

    2、登陆时,提示用户名密码错误

    3、删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。

二、jQuery Ajax

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

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

  

三、原生Ajax

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

 

  XmlHttpRequest对象的主要方法:

a. void open(String method,String url,Boolen async)

   用于创建请求

    

   参数:

       method: 请求方式(字符串类型),如:POST、GET、DELETE...

       url:    要请求的地址(字符串类型)

       async:  是否异步(布尔类型)

 

b. void send(String body)

    用于发送请求

 

    参数:

        body: 要发送的数据(字符串类型)

 

c. void setRequestHeader(String header,String value)

    用于设置请求头

 

    参数:

        header: 请求头的key(字符串类型)

        vlaue:  请求头的value(字符串类型)

 

d. String getAllResponseHeaders()

    获取所有响应头

 

    返回值:

        响应头数据(字符串类型)

 

e. String getResponseHeader(String header)

    获取响应头中指定header的值

 

    参数:

        header: 响应头的key(字符串类型)

 

    返回值:

        响应头中指定的header对应的值

 

f. void abort()

 

    终止请求

 

  XmlHttpRequest对象的主要属性:

  

a. Number readyState

   状态值(整数)

 

   详细:

      0-未初始化,尚未调用open()方法;

      1-启动,调用了open()方法,未调用send()方法;

      2-发送,已经调用了send()方法,未接收到响应;

      3-接收,已经接收到部分响应数据;

      4-完成,已经接收到全部响应数据;

 

b. Function onreadystatechange

   当readyState的值改变时自动触发执行其对应的函数(回调函数)

 

c. String responseText

   服务器返回的数据(字符串类型)

 

d. XmlDocument responseXML

   服务器返回的数据(Xml对象)

 

e. Number states

   状态码(整数),如:200、404...

 

f. String statesText

   状态文本(字符串),如:OK、NotFound...

 

四、伪“Ajax”

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

技术分享
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     {% load staticfiles %}
  7 
  8     <style>
  9         .ajaxsubmit1, .ajaxsubmit2, .ajaxsubmit3, .ajaxsubmit4, .ajaxsubmit5,.ajaxsubmit6 {
 10             display: inline-block;
 11             background-color: blue;
 12             color: white;
 13             margin: 5px 5px;
 14         }
 15     </style>
 16 
 17 </head>
 18 <body>
 19 <h1>index</h1>
 20 <h2>原生ajax_GET请求</h2>
 21 
 22 <a class="ajaxsubmit1">点击提交</a>
 23 
 24 <h2>原生ajax_POST请求</h2>
 25 
 26 <a class="ajaxsubmit2">点击提交</a>
 27 
 28 <hr>
 29 
 30 <h2>基于iframe+Form表单伪造ajax</h2>
 31 <div>
 32     <iframe id="iframe" name="ifra"></iframe>
 33     <form id="fm" action="/ajax1.html" method="post" target="ifra">
 34         <input type="text" name="user" value="heilong">
 35         <a class="ajaxsubmit3">点击提交</a>
 36     </form>
 37 </div>
 38 
 39 <hr>
 40 <h1>上传文件jquery方式</h1>
 41 <input type="file" id="img">
 42 <a class="ajaxsubmit4">点击上传</a>
 43 
 44 <h1>上传文件原生ajax方式</h1>
 45 <input type="file" id="img1">
 46 <a class="ajaxsubmit5">点击上传</a>
 47 
 48 <h1>上传文件iframe+form方式</h1>
 49 <iframe style="display: none" id="iframe1" name="ifra1"></iframe>
 50 <form id="fm2" action="/ajax1.html" method="post" enctype="multipart/form-data" target="ifra1">
 51     <input type="text" name="k1" value="v1">
 52     <input type="text" name="k2" value="v2">
 53     <input type="file" name="k3" id="img1">
 54     <a class="ajaxsubmit6">点击上传</a>
 55 </form>
 56 
 57 
 58 <script src="{% static ‘jquery-3.1.1.js‘ %}"></script>
 59 <script>
 60     $(".ajaxsubmit1").bind("click", function () {
 61         var xhr = new XMLHttpRequest();
 62         xhr.open("GET", "/ajax1.html?p=123");
 63         xhr.onreadystatechange = function () {
 64             if (xhr.readyState == 4) {
 65                 console.log(xhr.responseText);
 66             }
 67         };
 68         xhr.send(null);
 69     });
 70 
 71     $(".ajaxsubmit2").bind("click", function () {
 72         var xhr = new XMLHttpRequest();
 73         xhr.open("POST", "/ajax1.html");
 74         xhr.onreadystatechange = function () {
 75             if (xhr.readyState == 4) {
 76                 console.log(xhr.responseText);
 77             }
 78         };
 79         xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset-UTF-8");
 80         xhr.send("p=456");
 81     });
 82 
 83     function reloadiframe() {
 84         var content = $(this).contents().find("body").text();
 85         console.log(content);
 86         var content_obj = JSON.parse(content);
 87         console.log(content_obj);
 88         if (content_obj.status) {
 89             console.log(content_obj.message);
 90         }
 91     }
 92 
 93     $(".ajaxsubmit3").bind("click", function () {
 94         $("#iframe").bind("load", reloadiframe);
 95         $("#fm").submit();
 96     });
 97 
 98     $(".ajaxsubmit4").bind("click", function () {
 99         var data = new FormData();
100         data.append("k1", "v1");
101         data.append("k2", "v2");
102         var file_obj = $("#img")[0].files[0];
103         data.append("k3", file_obj);
104 
105         $.ajax({
106             url: "/ajax1.html",
107             type: "POST",
108             data: data,
109             success: function (arg) {
110                 console.log(arg);
111             },
112             processData: false,
113             contentType: false
114         })
115     });
116 
117     $(".ajaxsubmit5").bind("click", function () {
118         var data = new FormData();
119         data.append("k1", "v1");
120         data.append("k2", "v2");
121         var file_obj = $("#img1")[0].files[0];
122         data.append("k3", file_obj);
123 
124         var xhr = new XMLHttpRequest();
125         xhr.open("POST", "/ajax1.html");
126         xhr.onreadystatechange = function () {
127             if (xhr.readyState == 4) {
128                 console.log(xhr.responseText);
129             }
130         };
131         xhr.send(data);
132     });
133 
134     function reloadiframe1() {
135         var content = $(this).contents().find("body").text();
136         var content_obj = JSON.parse(content);
137         console.log(content_obj);
138     }
139 
140     $(".ajaxsubmit6").bind("click", function () {
141         $("#iframe1").bind("load", reloadiframe1);
142         $("#fm2").submit();
143     });
144 </script>
145 
146 </body>
147 </html>
原生Ajax及伪Ajax简单事例(包含文件上传)

 

五、跨域Ajax

以上是关于python开发之Ajax的主要内容,如果未能解决你的问题,请参考以下文章

AJAX相关JS代码片段和部分浏览器模型

python自动开发之(ajax)第二十天

执行AJAX返回HTML片段中的JavaScript脚本

我的Android进阶之旅NDK开发之在C++代码中使用Android Log打印日志,打印出C++的函数耗时以及代码片段耗时详情

十条jQuery代码片段助力Web开发效率提升

html PHP代码片段: - AJAX基本示例:此代码演示了使用PHP和JavaScript实现的基本AJAX功能。