前端：Ajax 系统的学习与正确使用·文字教程

作者: 煮茶忘放糖 | 来源:发表于2017-08-30 15:13 被阅读122次

Ajax 系统的学习与正确使用

我原来也接触过Ajax的开发，但始终没有系统的学习，今天正好有时间就在慕课网学习一下，也在这里分享自己学习后的收获。

Ajax全称：Asynchronous Javascript And XML（异步JavaScript和XML）

它不是某种编程语言，而是一种在无需重新加载整个网页的情况之下，能够更新部分网页的技术。

传统的网页更新内容需要重新载入整个页面，有一个场景特别常见：

在网页的表单中如果填写很多内容，首先填写时没有实时表单验证，不利于纠错，其次提交表单后判断数据合法需要重新加载页面，原填写数据就会丢失，即使有js做表单验证，但也是不全面的，数据有时候是需要和服务端数据进行对比的，如下图所示，整个交互过程是同步的，非常耗费时间且不利于使用：

本图来自慕课网，如有侵权请联系本人删除处理。

所以最后产生了Ajax这种异步交互技术，有效的解决了表单提交不能实时验证的问题。

本图来自慕课网，如有侵权请联系本人删除处理。

其中这个异步的过程实现依靠XMLHttpRequest对象，我们利用它来传输数据，而不用刷新整个网页。

如何实现Ajax呢？我们需要下面3个方面的知识：

运用HTML和CSS来实现页面，表达信息；

运用XMLHttpRequest和Web服务器进行数据的异步交换；

运用JavaScript操作DOM，实现网页动态局部刷新；

接下来进入正式的代码阶段。

1. 创建一个XMLHttpRequest对象

核心代码就一句：

var request = new XMLHttpRequest();

但为了保持兼容性（IE5和IE6），我们用下面这种写法：

var request；
if (window.XMLHttpRequest){
        request = new XMLHttpRequest();   //IE7+,Firefox,Chrome,Opera，Safari
}else{
        request = new ActiveXObjecT("Microsoft.XMLHTTP"); //IE5, IE6
}

完成创建对象后，我们就可以请求了，但请求之前，我们需要了解一下请求的本质是什么？

2. HTTP概念解析

本图来自慕课网，如有侵权请联系本人删除处理。

HTTP是一种无状态协议，即不建立持久的连接，整个连接过程只连接一次，数据交换后连接就会被关闭。

一个完整的HTTP请求过程，通常有下面7个步骤：

建立TCP连接

Web浏览器向Web服务器发送请求命令

Web浏览器发送请求头信息

Web服务器应答

Web服务器发送应答头信息

Web服务器向浏览器发送数据

Web服务器关闭TCP连接

一个HTTP请求，一般由四部分组成：

1.HTTP请求的方法或动作，比如是GET还是POST请求；

2.正在请求的URL，即请求的地址；

3.请求头，包含一些客户端系统环境信息，身份验证信息等；

4.请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等；

下面是访问简书首页的请求（内容做了精简）：

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Cookie:xxx
Host:www.jianshu.com
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.78 Safari/537.36

响应头信息：

Request URL:http://www.jianshu.com/
Request Method:GET
Status Code:200 OK
Remote Address:42.48.110.45:80
Referrer Policy:no-referrer-when-downgrade

关于HTTP部分交给菜鸟教程吧！

文字教程链接：HTTP 教程

3. XMLHttpRequest 发送请求

请求方法的函数：

open(method, url, async) 【 method为请求类型，url请求地址，async为是否异步 】
send(string) 【 发送函数，最后调用 】

示例：

request.open("GET","get.php",true);
request.send();

request.open("POST","post.php",true);
request.send();

request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=王二狗&sex=男");

4. XMLHttpRequest 取得响应

取得响应的函数：

responseText：获得字符串形式的响应数据
responseXML：获得XML形式的响应数据
status和statusText：以数字和文本形式的响应数据
getAllResponseHeader()：获取所有的响应报头
getResponseHeader()：查询响应中某个字段的值

我们有时候需要监听请求过程，需要用到一个方法获取状态：

readyState属性（值）：

0：请求未初始化

1：服务器连接已建立，open已经调用；

2：请求已接收，已经接收到头信息；

3：请求处理中，即已经接收到响应主体；

4：请求已完成，且响应已就绪；

示例：

var request=new XMLHttpRequest();

request.open("GET","get.php",true);
request.send();

request.onreadystatechange=function(){
if(request.readyState===4&&request.status===200){
    // 做一些事情 request.responseText
  }
}

5. Ajax示例

本节代码来自 一刀不二的 Flask Ajax Demo。

后端代码：

from flask import Flask, jsonify, request, render_template  
  
app = Flask( __name__ )  
 
 
@app.route( "/", methods = [ "POST", "GET" ] )  
def index():  
    if request.method == "POST":  
        first_name = request.form.get( "first_name", "null" )  
        last_name = request.form.get( "last_name", "null" )  
        return jsonify( name = first_name + " " + last_name )  
    else:  
        return render_template( "index.html" )  
  
  
if __name__ == "__main__":  
    app.run(  
        port = 7777,  
        debug = True  
    )

前端代码：

<html>
    <head>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">
            var $SCRIPT_ROOT = {{request.script_root|tojson|safe}};
            function ajaxForm() {
                $.ajax( {
                    type : "POST",
                    url : $SCRIPT_ROOT,
                    dataType : "json",
                    data : {
                        "first_name" : $( "input[name=first_name]" ).val(),
                        "last_name" : $( "input[name=last_name]" ).val(),
                    },
                    error: function( XMLResponse ) {
                        alert( XMLResponse.responseText )
                    },
                    success : function ( data, textStatus ) {
                        $( "#name" ).text( data.name );
                    }
                } );
                return false;
            }
        </script>
    </head>
    <body>
        <form action="" method="post" onSubmit="return ajaxForm()">
            <input name="first_name" type="text" />
            <input name="last_name" type="text" />
            <input type="submit" />
        </form>
        <p>Hello: <span id="name"></span></p>
    </body>
</html>

效果图：

20170903182446.png

6. JSON格式

6.1 JSON基本概念

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

6.2 JSON与XML对比

Json的长度和XML格式比起来很短小；

Json读写速度更快；

Json可以使用JavaScript内建的方法直接解析，转换为JavaScript对象，非常方便；

JSON 数据的书写格式是：名称/键对

实际上的表现就是这样的：

20170903195828.png

6.3 JSON解析、格式化和校验工具

6.3.1 JSON解析

JSON原生的解析方法有两种，一是eval，另外一种是JSON.parse

注意：在代码中使用eval是很危险的，特别是用它执行第三方的JSON数据（其中可能包含恶意代码）时，尽量使用JSON.parse()方法解析字符串本身，该方法还可以捕捉JSON中的语法错误。

示例代码：

eval版本：

var jsondata = '{"staff": [{ "name":"洪七", "age":"70"},{ "name":"郭靖", "age":"35"},{ "name":"黄蓉", "age":"30"}]}';
var jsonobj = eval( '(' +  jsondata + ')');
alert(jsonobj.staff[0].name);

JSON.parse版本：

var jsondata = '{"staff": [{ "name":"洪七", "age":"70"},{ "name":"郭靖", "age":"35"},{ "name":"黄蓉", "age":"30"}]}';
var jsonobj = JSON.parse(jsondata);
alert(jsonobj.staff[0].name);

你可以将以上代码复制到浏览器上的Console执行看看，当然了，它们显示效果是一样的。

我们为什么不推荐使用eval呢？是这样的，因为eval会执行JSON数据代码，假如数据中存在一些恶意代码，那么使用eval解析，就会执行它，这对我们来说是十分危险的。

而JSON.parse就不一样，它会直接提示语法错误，数据是不合法的。

6.3.2 JSON格式化和校验工具

观察JSON数据格式，我们会发现其中有很多分号，花括号，逗号，一不小心就会遗漏，也不利于观察。

JSON格式化就十分有必要了，这里有一个在线解析 + 格式化 + 校验网站：http://www.json.cn/

JSON数据格式一般遵守一个原则：

{
    "success": true,
    "errormsg": "xxx",
    "data": "xxx"
}

就字面意思，我就不多解释了。

7. jQuery中的AJAX

其实第5节代码示例就是使用jQuery中的AJAX，这里再做个汇总：

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

函数描述:

jQuery.ajax()
执行异步 HTTP (Ajax) 请求。

.ajaxComplete()
当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。

.ajaxError()
当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。

.ajaxSend()
在 Ajax 请求发送之前显示一条消息。

jQuery.ajaxSetup()
设置将来的 Ajax 请求的默认值。

.ajaxStart()
当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。

.ajaxStop()
当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。

.ajaxSuccess()
当 Ajax 请求成功完成时显示一条消息。

jQuery.get()
使用 HTTP GET 请求从服务器加载数据。

jQuery.getJSON()
使用 HTTP GET 请求从服务器加载 JSON 编码数据。

jQuery.getScript()
使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。

.load()
从服务器加载数据，然后把返回到 HTML 放入匹配元素。

jQuery.param()
创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。

jQuery.post()
使用 HTTP POST 请求从服务器加载数据。

.serialize()
将表单内容序列化为字符串。

.serializeArray()
序列化表单元素，返回 JSON 数据结构数据。

说明：具体函数示例讲解由 w3school 提供。

8. 扩展知识介绍（跨域）

8.1 名词解释

跨域

跨域概念：

浏览器对于JavaScript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js，对象或数据(因为a.cn和b.cn是不同域)，所以跨域就出现了.

同域概念：

相同域名，端口相同，协议相同。

同源策略：

请求的URL地址,必须与浏览器上的URL地址处于同域上，也就是域名，端口，协议相同。

8.2 处理跨域方法

方法一

方法二

方法三

Ajax跨域，这应该是最全的解决方案了

浏览器同源策略与ajax跨域方法汇总

轻松搞定JSONP跨域请求

js前端解决跨域问题的8种方案（最新最全）

9. 总结

通过学习，我们能了解：

Ajax概念和使用方法

Ajax 使用很简单

最后附上视频课程地址：http://www.imooc.com/learn/250

---end---

本文无意侵犯任何人或组织著作权，如果贵公司或个人对此存在异议，欢迎联系我处理。

前端：Ajax 系统的学习与正确使用·文字教程

1. 创建一个XMLHttpRequest对象

2. HTTP概念解析

3. XMLHttpRequest 发送请求

4. XMLHttpRequest 取得响应

5. Ajax示例

6. JSON格式

6.1 JSON基本概念

6.2 JSON与XML对比

6.3 JSON解析、格式化和校验工具

6.3.1 JSON解析

6.3.2 JSON格式化和校验工具

7. jQuery中的AJAX

8. 扩展知识介绍（跨域）

8.1 名词解释

8.2 处理跨域方法

9. 总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Java