python基础---->AJAX的学习

时间 2019-11-12

标签 python 基础 ajax 学习栏目 Python 繁體版

原文原文链接

前言

对于WEB应用程序：用户浏览器发送请求，服务器接收并处理请求，而后返回结果，每每返回就是字符串（HTML），浏览器将字符串（HTML）渲染并显示浏览器上。html

而在传统的Web应用中，一个简单操做须要从新加载全局数据；ajax

而AJAX就改变了这种方式数据库

什么是AJAX？

AJAX，Asynchronous JavaScript and XML (异步的JavaScript和XML)，一种建立交互式网页应用的网页开发技术方案，是一种在无需从新加载整个网页的状况下，可以更新部分网页的技术。json

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

XML：XML是一种标记语言，是Ajax在和后台交互时传输数据的格式之一浏览器

AJAX的工做原理

AJAX是基于现有的Internet标准，而且联合使用它们：缓存

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (做为转换数据的格式)

AJAX的应用场景

注册时，自动检测用户是否已经存在；登陆时，提示用户名密码错误缘由等等服务器

XmlHttpRequest对象

关于XMLHttpRequest

XMLHttpRequest 是 AJAX 的基础。app

全部现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。异步

XMLHttpRequest 用于在后台与服务器交换数据。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。

建立XMLHttpRequest 对象

全部现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象，老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

XHR-服务器请求

如需将请求发送到服务器，咱们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

XmlHttpRequest对象的主要方法介绍：

open(String method,String url,Boolen async)  # 用于建立请求 
参数：
       method： 请求方式（字符串类型），如：POST、GET、DELETE...
       url：    要请求的地址（字符串类型）
       async：  是否异步（布尔类型）
 
send(String body)  # 仅用于POST发送请求
参数：
       body： 要发送的数据（字符串类型）
 
setRequestHeader(String header,String value)  # 用于设置请求头
参数：
       header： 请求头的key（字符串类型）
       vlaue：  请求头的value（字符串类型）
 
getAllResponseHeaders()  # 获取全部响应头
返回值：
       响应头数据（字符串类型）
 
getResponseHeader(String header)  #获取响应头中指定header的值
参数：
       header： 响应头的key（字符串类型）
返回值：
       响应头中指定的header对应的值
 
abort()  #终止请求

GET和POST的区别：

与 POST 相比，GET 更简单也更快，而且在大部分状况下都能用。

在如下状况中，使用 POST 请求：

没法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

XHR-服务器响应

若是须要得到来自服务器的响应，那就使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText    # 得到字符串形式的响应数据。
responseXML     # 得到 XML 形式的响应数据。

举个栗子：

# responseText 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

onreadystatechange 事件

当请求被发送到服务器时，咱们须要执行一些基于响应的任务；每当 readyState 改变时，就会触发 onreadystatechange 事件；readyState 属性存有 XMLHttpRequest 的状态信息。

onreadystatechange    # 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState  # 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
    0: 请求未初始化
    1: 服务器链接已创建
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成，且响应已就绪

status
    200: "OK"
    404: 未找到页面

在 onreadystatechange 事件中，咱们规定当服务器响应已作好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

实例：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

使用回调函数

回调函数是一种以参数形式传递给另外一个函数的函数，若上存在多个 AJAX 任务，那么您应该为建立 XMLHttpRequest 对象编写一个标准的函数，并为每一个 AJAX 任务调用该函数。该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

function myFunction()
{
    loadXMLDoc("ajax_info.txt",function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}

简单的AJAX实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        function loadXMLDoc() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            } else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "ajax_info.txt", true);
            xmlhttp.send('wdadawd');
        }
    </script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

修改内容

你成功的修改了文本的内容

ajax_info.txt

JQuery Ajax

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

JQuery Ajax本质 XMLHttpRequest 或 ActiveXObject ；

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方法列表

跨域Ajax

因为浏览器存在同源策略机制，同源策略阻止从一个源加载的文档或脚本获取或设置另外一个源加载的文档的属性。

因为同源策略是浏览器的限制，因此请求的发送和响应是能够进行，只不过浏览器不接受罢了。

跨域，跨域名访问，如：http://www.a.com 域名向 http://www.b.com域名发送请求。

一、JSONP实现跨域请求

JSONP（JONP - JSON with Padding是JSON的一种“使用模式”)，利用script标签的src属性（浏览器容许script标签跨域）

二、CORS

随着技术的发展，如今的浏览器能够支持主动设置从而容许跨域请求，即：跨域资源共享（CORS，Cross-Origin Resource Sharing），其本质是设置响应头，使得浏览器容许跨域请求。