11-Ajax详解

作者: magic_pill | 来源:发表于2017-09-08 16:58 被阅读153次

11-Ajax详解
Mysql性能调优
C/C++的30个冷知识
TSNE 详解
SwiftSyntax 详解
深入理解相机五(硬件抽象层HAL)
Lucene和ElasticSearch基本概念
自定义View的各个重要的类和属性
SpringBoot详解（一）-快速入门
SpringBoot详解（三）-Spring Boot的web开

Ajax的基本概念及使用

同步&异步

同步：必须等待前面的任务完成，才能继续后面的任务；
异步:不受当前主要任务的影响。
举个例子：
同步：我们在银行排队时，只有等到你了，才能够去处理业务；
异步：我们在排队的时候，玩王者农药的先后顺序是各不相关的。

异步更新网站

当我们访问一个普通的网站时，当浏览器加载完：HTML、CSS、JS以后网站的内容就固定了。如果网站内容发生更改必须刷新页面才能够看到更新的内容。
网站内容更新：常规的网站内容更新，必须通过刷新才能显示新内容。
异步更新：
我们在访问新浪微博时，当你看到一大半了，会自动帮我们加载更多的微博，同时之前的页面并没有刷新。

Ajax概念

在不刷新页面的情况下，“偷偷”的发送数据给服务器，通过发出http请求。
在没有学习Ajax以前，如果想要发出http请求（发出请求报文）：
页面会刷新；
后果：如果网速很慢，刷新页面势必会重新加载；造成不必要的时间浪费；
一些极少量的信息想要提交给服务器，也没有必要刷新整个页面。
写法：是通过js在浏览器端帮我们预定义的一个异步对象来完成的。
事例：当我们正在排队的时候，可以通过手机去干一些其他的事情。
在浏览器中，我们也能够不刷新页面，通过ajax的方式去获取一些新的内容，类似网页有微博、朋友圈、邮箱等。
单词解释：Asynchronous Javascript And XML（异步JavaScript和XML），他并不是凭空出现的新技术，而是对于现有技术的结合：核心是js对象XMLHttpRequest。

XMLHttpRequest

ajax使用的依旧是HTTP请求，那么让我们来回忆一下一个完整的HTTP请求需要什么：
请求的网址，方法get/post；
提交请求内容数据、请求主体等；
接收响应回来的内容。

写Ajax的步骤

先写html页面，通过某种条件发出ajax请求；
写在php页面，处理发过来的请求；
再回到浏览器异步对象的onreadystatechange事件中，去处理返回的内容。

发送Ajax请求，使用的是js

五步使用法:
创建异步对象：var ajaxObj = new XMLHttpRequest();
使用open方法设置请求的参数：
- ajaxObj.open('get','xxx.php');
- 参数1为请求的方法，参数2为请求的url；
发送请求：（发送请求报文）
- ajaxObj.send();
注册事件:（服务器返回响应报文）
- 状态改变时就会调用，如果要在数据完成请求回来的时候才调用，我们需要手动的写一些判断的逻辑；

ajaxObj.onreadystatechange = function (){
        //为了保证数据完整回来，我们一般会判断两个值
        if (ajaxObj.readyState==4 && ajaxObj.status==200){
            //在注册事件中，获取返回的内容，并修改页面的显示
        }
}

在注册的事件中，获取返回的内容，并修改页面的显示。

浏览器与服务器的关系

示例代码：GET（get的数据，直接在请求的url中添加即可）
html中的代码：

<body>
    <input type="text" class="user">
    <button>发送请求</button>
    <script>
        document.querySelector("button").onclick = function () {
            //1.创建异步对象
            var xhr = new XMLHttpRequest();

            //2.设置method、url等参数
            var userName = document.querySelector(".user").value;
            xhr.open("get","03-XMLHttpRequest.php?name="+userName);

            //3.发送数据
            xhr.send();

            //4.绑定事件
            xhr.onreadystatechange = function () {
                if (xhr.readyState==4 && xhr.status==200){
                    //5.在绑定事件中获取返回的数据，显示页面
                    console.log(xhr.responseText);
                }
            }
        }
    </script>
</body>

php中的代码：

<?php
        echo $_GET['name']."，欢迎你";
?>

示例代码:POST
有两点不同
1.发送的数据写在send方法中；
2.必须要在open和send之间添加setRequestHeader("Content-type","application/x-www-form-urlencoded");
html中的代码：

<body>
    <input type="text" class="user">
    <button>发送请求</button>
    <script>
        document.querySelector("button").onclick = function () {
            //1.创建异步对象
            var xhr = new XMLHttpRequest();

            //2.设置method、url等参数
            xhr.open("POST","03-XMLHttpRequest.php");

            //如果使用post发送数据，必须要添加如下内容，修改发送给服务器的请求报文的内容。form表单使用post发送数据不需要设置，因为form表单默认会进行转换
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            //3.发送请求，发送请求的数据写在send方法中
            //格式 name=jiang & age=18
            var userName = document.querySelector(".user").value;
            xhr.send("name="+userName);

            //4.绑定事件
            xhr.onreadystatechange = function () {
                //5.在绑定事件里获取数据，展示页面
                if (xhr.readyState==4 && xhr.status==200){
                    console.log(xhr.responseText);
                }
            }
        }
    </script>
</body>

php中的代码：

<?php
        echo $_POST["name"]."，你好";
?>

实际开发中，get和post的选取：
由后台程序员以文档或者口头形式告知；
如果不考虑提交文件，那么get/post的作用基本一致，只是写法不同；
自己写demo的时候，随便选取哪一个使用。

练习：异步切换明星头像

XMLHttpRequest_API讲解

创建`XMLHttpRequest对象`(兼容性写法):

新版本浏览器:

var xml=new XMLHttpRequest();

IE5和IE6:

var xml=new ActiveXObject("Microsoft.XMLHTTP");

考虑兼容性创建Ajax对象

var request ;
if(XMLHttpRequest){
        // 新式浏览器写法
        request = new XMLHttpRequest();
}else{
        //IE5,IE6写法
        request = new ActiveXObject("Microsoft.XMLHTTP");
}

发送请求:

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。<ul><li>method：请求的类型；GET 或 POST；</li><li>url：文件在服务器上的位置；</li><li>async：true（异步）或 false（同步）</li></ul>
send(string)	将请求发送到服务器。string：仅用于 POST 请求

POST请求注意点:

如果想要像form表单提交数据那样使用POST请求，需要使用XMLHttpRequest对象的setRequestHeader()方法来添加HTTP头。然后在send()方法中添加想要发送的数据：

xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

onreadystatechange事件

当服务器给予我们反馈时,我们需要实现一些逻辑

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化：<ul><li>0：请求未初始化；</li><li>1：服务器连接已建立；</li><li>2：请求已接收；</li><li>3：请求处理中；</li><li>4：请求已完成，且响应已就绪。</li></ul>
status	200: "OK"；404: 未找到页面

服务器响应内容

如果响应的是普通字符串，使用responseText，如果响应的是XML，使用responseXML；

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

服务器

Apache；
web服务端开发的语言；
设置访问的网站：
设置网站根目录；
往网站的目录中拷贝文件即可：
- .html：如果存在该页面，会原封不动的返回给用户；
- .php：会将php中的代码执行完，将结果返回给浏览器。

php如何读取文本数据

目的：实现数据和逻辑代码分离；
PHP之所以被称为“最好的编程语言”：使用十分方便，基本上我们能够想到的功能，都帮我们封装成了方法：

file_get_contents(文件路径);

Ajax数据传输XML

XML简介

XML：指可扩展标记语言EXtensible Markup Language，他设计的时候是用来传递数据的，虽然格式跟HTML类似.。
xml示例：下面是一个XML示例

<?xml version="1.0" encoding="UTF-8"?>
<singer>
<name>周杰伦</name>
<age>18</age>
<skill>途牛</skill>
</singer>

XML是纯文本，这点跟HTML很像，所以我们可以用任何的文本编辑软件去打开编辑它。

XML语法

虽然看起来跟HTML类似,但是XML的语法有些需要注意的,更为详细的可以查阅：http://www.w3school.com.cn/xml/index.asp。
XML声明：第一行是XML的声明，指定XML版本(1.0)以及使用的编码(UTF-8万国码)：

<?xml version="1.0" encoding="UTF-8"?>

自定义标签，XML中没有默认的标签，所有的标签都是我们自定义的；
注：不要使用数字开头，不要使用中文。

<!-- 下列标签都是被允许的 -->
<fox></fox>
<name></name>

双标签XML中没有单标签，都是双标签；

<haha>标签内</haha>

根节点：XML中必须有一个根节点,所有的子节点都放置在根节点下

<root>
  <name></name>
</root>

XML属性：跟HTML一样，XML的标签里面也能够添加属性type = 'text'，但是不建议这样用,而是使用标签的方式来表述内容(下半部分代码)

<!-- 使用属性配合标签表述信息 -->
<person sex="female">
  <firstname>Anna</firstname>
  <lastname>Smith</lastname>
</person>
<!-- 使用标签来表述信息 -->
<person>
  <sex>female</sex>
  <firstname>Anna</firstname>
  <lastname>Smith</lastname>
</person>

XML解析

因为XML就是标签,所以直接用解析Dom元素的方法解析即可;
html代码：

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>Document</title>
</head>
<body>
      <person id='personXML'>
          <name>fox</name>
          <age>18</age>
          <skill>小花花</skill>
      </person>
</body>
</html>

获取方法：

<script type="text/javascript">
    var xmlObj = document.getElementById("personXML");
    var name = xmlObj.getElementsByTagName('name')[0].innerHTML;
    console.log(name);
</script>

PHP中设置Header

在php中如果要使用xml传输数据，需要使用header()设置返回的内容为xml:

header('content-type:text/xml;charset=utf-8');

从php中获取xml内容，html中的代码如下：

<script type="text/javascript">
    document.querySelector('#getXML').onclick = function () {
        var ajax = new XMLHttpRequest();

        ajax.open('get','get_XMl.php');

        ajax.send();

        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status==200) {
                // 如果 返回的是 xml文件
                console.log(ajax.responseText);

                // 异步 对象中 有另外一个属性 用来专门获取 xml
                // xml对象 在浏览器端 就是一个 document对象
                // 解析时 可以直接使用 querySelector 或者 getElementById等 document对象 有的语法
                console.log(ajax.responseXML);
                console.log(ajax.responseXML.querySelector('name').innerHTML);
                // 下面这个 页面文档对象，和ajax.responseXML一模一样， 如果要获取某个标签，使用同样的方法
                console.log(window.document);
            }
        }
    }
</script>

php：

<?php
        header('content-type:text/xml;charset=utf-8');
        $text = file_get_contents("01-getFile-xml.xml");
        echo $text;
?>

xml：

<?xml version="1.0" encoding="UTF-8" ?>
<yijiang>
        <name>yijiang</name>
        <age>20</age>
        <sex>男</sex>
</yijiang>

Ajax中获取xml：

浏览器：
通过xhr.responseXML获取返回的xml值；
（如果通过xhr.responseText获取，返回的是字符串）。
服务器：
准备一个xml文件；
php中获取xml文件内容，并返回（注意要设置header：header('content-type:text/xml;charset=utf-8');）

实际开发中xml用的频率不是很高，敲两遍就可以了。

案例：重写明星头像

html中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change</title>

    <style>
        table{
            width: 400px;
            margin: 20px auto;
            border: 1px solid #000;
        }
        td{
            border: 1px solid #000;
        }
        img{
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <script>
        //1.
        var xhr = new XMLHttpRequest();
        //2.
        xhr.open("get","change-xml.php");
        //3.
        xhr.send();
        //4.
        xhr.onreadystatechange = function () {
            //5.
            if (xhr.readyState==4 && xhr.status==200){
                var responseStars = xhr.responseXML;
                var stars = responseStars.querySelector("stars").children;
                console.log(stars[0].querySelector("name").innerHTML);
                var str = "<table>";
                for(var i=0; i<stars.length; i++){
                    str += "<tr>";
                    str += "<td>"+stars[i].querySelector("name").innerHTML+"</td>";
                    str += "<td>![]("+stars[i].querySelector("pic").innerHTML+")</td>";
                    str += "<td>"+stars[i].querySelector("description").innerHTML+"</td>";
                }
                str += "</table>";

                document.body.innerHTML = str;
            }
        }
    </script>
</body>
</html>

php中：

<?php
    header('content-type:text/xml;charset=utf-8');
    echo file_get_contents('change-xml.xml');
?>

xml中：

<?xml version="1.0" encoding="UTF-8" ?>
<stars>
    <star>
        <name>Angelababy</name>
        <age>30</age>
        <description>著名女演员</description>
        <pic>images/baby.jpg</pic>
    </star>
    <star>
        <name>mage</name>
        <age>16</age>
        <description>国际名模</description>
        <pic>images/mage.jpeg</pic>
    </star>
    <star>
        <name>wangge</name>
        <age>18</age>
        <description>大陆著名企业家</description>
        <pic>images/shuaige.jpeg</pic>
    </star>
</stars>

Ajax传输JSON

JSON语法

JSON(JavaScript Object Notation)
一种字符串格式；
是ECMAScript的子集，作用是进行数据的交换；
而且由于语法更为简洁，网络传输以及机器解析都更为迅速；
使用的最多，基本上所有的语言都有将JSON字符串转化为该语言对象的语法。
语法规则:
数据在键值对中；
数据由逗号分隔；
花括号保存对象；
方括号保存数组；
总结：属性名必须使用双引号包裹，属性值（数组除外）必须使用双引号包裹。
数据类型:
下列内容，无论是键还是值都是用双引号包起来：
- 数字（整数或浮点数）；
- 字符串（在双引号中）；
- 逻辑值（true 或 false）；
- 数组（在方括号中）；
- 对象（在花括号中）；
- null。
示例代码：下部分代码看起来类似于定义JavaScript对象

// 基本对象
{
      "name":"fox",
      "age":"18",
      "sex":"true",
      "car":null
}
// 数组
[
      {
          "name":"小小胡",
          "age":"1"
      },
      {
          "name":"小二胡",
          "age":"2"
      }
]

JSON解析

接下来演示如何使用JavaScript和PHP对JSON进行解析
基本使用步骤：

JSON图

JavaScript中

使用JSON对象：
JSON.parse()方法：将JSON字符串转化为JavaScript对象；
JSON.stringify()方法：将JavaScript对象转化为JSON字符串；
由于老式IE(8以下)浏览器中没有JSON对象，通过导入JSON2.js框架即可解决,框架获取地址为:JSON2.js_github地址（https://github.com/douglascrockford/JSON-js）；

var Obj = {
  name:"fox",
  age:18,
  skill:"撩妹"
};
console.log(Obj);
// 将JavaScript对象格式化为JSON字符串
var jsonStr = JSON.stringify(Obj);
console.log(jsonStr);
// 将JSON字符串转化为JavaScript对象
var jsonObj = JSON.parse(jsonStr);
console.log(jsonObj);

使用eval()方法：使用eval()方法需要注意的是,需要将内容使用()括号包裹起来,如示例代码:

<script type="text/javascript">
var jsonStr ={
  "name":"fox",
  "age":18,
  "skill":"撩妹"
};

var jsonObj = eval('('+jsonStr+')'); console.log(jsonObj);

</script>

PHP中

json_decode()方法：
将json字符串转化为php变量；
json_encode()方法：
将php变量转化为json字符串。
示例代码:

<?php
    header("Content-Type:text/html;charset=utf-8");
    // json字符串
    $jsonStr = '{"name":"yijiang","age":"18","skill":"歌神"}';
    // 字符串转化为 php对象
      print_r(json_decode($jsonStr));

      echo "<br>";
      // php数组
      $arrayName = array('name' =>'littleFox' ,'age' => 13 );
      // php对象 转化为 json字符串
      print_r(json_encode($arrayName));
 ?>

输出结果为:

stdClass Object ( [name] => yijiang [age] => 18 [skill] => 歌神 )
{"name":"littleFox","age":13}

解析JSON的完整写法：

html中：此时js中获取返回的数据使用xhr.responseText

    <script>
        //1.
        var xhr = new XMLHttpRequest();
        //2.
        xhr.open("post","02-getFile-json.php");
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //3.
        xhr.send();
        //4.
        xhr.onreadystatechange = function () {
            //5.
            if (xhr.readyState==4 && xhr.status==200){
                var person = JSON.parse(xhr.responseText);
                console.log(person);
                //Object {name: "jiang", age: "16", skill: "撩汉"}
                console.log(person.name);   //jiang
                console.log(person.age);    //16
            }
        }
    </script>

php中：

<?php
    echo file_get_contents("02-getFile-json.json");
?>

json文件：

{
    "name":"jiang",
    "age":"16",
    "skill":"撩汉"
}

Ajax工具函数封装

原生Ajax写法

原生使用Ajax主要分为五步，需要手写较多内容，如果每次我们使用Ajax都需要手写一遍，较为浪费时间，所以我们将公共代码抽取，封装为工具函数。
五步使用法：
建立XMLHTTPRequest对象；
使用open方法设置和服务器端交互的基本信息：
- 设置提交的网址、数据以及post提交的一些额外内容；
使用send设置发送的数据，开始和服务器端交互：
- 发送数据；
注册事件：
- 当服务器回应我们了，我们想要执行什么逻辑；
更新界面：
- 在注册的事件中，获取返回的数据，更新界面。
示例代码：GET:
get的数据，直接在请求的url中添加即可；

<script type="text/javascript">
  // 创建XMLHttpRequest 对象
  var xml = new XMLHttpRequest();
  // 设置跟服务端交互的信息
  xml.open('get','01.ajax.php?name=fox');
  //发送数据
  xml.send(null);    // get请求这里写null即可，或者直接空
  // 接收服务器反馈
  xhr.onreadystatechange = function () {
      // 这步为判断服务器是否正确响应
      if (xhr.readyState == 4 && xhr.status == 200) {
          // 打印响应内容
          alert(xml.responseText);
      }
  };
</script>

示例代码：POST:

<script type="text/javascript">
  // 异步对象
  var xhr = new XMLHttpRequest();

  // 设置属性
  xhr.open('post', '02.post.php' );

  // 如果想要使用post提交数据,必须添加
  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

  // 将数据通过send方法传递
  xhr.send('name=fox&age=18');

  // 发送并接受返回值
  xhr.onreadystatechange = function () {
      // 这步为判断服务器是否正确响应
      if (xhr.readyState == 4 && xhr.status == 200) {
             alert(xhr.responseText);
      }
  };
</script>

抽取公共部分

重复步骤分析:
创建异步对象；
异步对象open,send方法调用；
post方法需要添加HTTP协议头文件；
判断Ajax响应状态。
哪些部分是需要使用者自定义的：
1. 提交方法；
2. url地址；
3. 数据；
4. Ajax请求成功调用方法；
上述内容，应该是调用时，由用户传入的。

//优化，传入一个对象作为参数，对象中分别包含其它属性：method,url,data,success
function ajax_tool(params) {
    //1.创建异步对象
    var xhr = new XMLHttpRequest();
    //2.3.
    if (params.method == "get"){
        if (params.data){
            params.url += "?";
            params.url += params.data;
        }
        //2.设置方法和url等
        xhr.open(params.method,params.url);
        //3.直接发送数据
        xhr.send();
    }else {
        //2.
        xhr.open(params.method,params.url);
        //设置请求头
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        if (params.data){
            //3.如果有数据，就发送数据
            xhr.send(params.data);
        }else {
            //如果没有数据直接发送就好
            xhr.send();
        }
    }
    //4.注册事件
    xhr.onreadystatechange = function () {
        //5.在事件中获取数据，并修改界面
        if (xhr.readyState==4 && xhr.status==200){
            success(xhr.responseText);
        }
    };
}

案例：聊天机器人

jQuery中的Ajax

JQuery中Ajax使用

JQuery作为最受欢迎的js框架之一，常见的Ajax已经帮助我们封装好了，只需要调用即可，更为详细的api文档可以查阅：w3cSchool_JQueryAjax：http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

`$.get()`方法

使用`get`方法取代复杂 $.ajax 向服务器获取数据；
请求成功时可调用回调函数；
如果需要在出错时执行函数，请使用 $.ajax。

参数列表

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。待发送 Key/value 参数
success(response)	可选。规定当请求成功时运行的函数。额外的参数：response - 包含来自请求的结果数据。
dataType	可选。规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断。可能的类型："xml"、"html"、"text"、"script"、"json"、"jsonp"。

关于dataType的说明：预计从服务端获取的数据类型，可以不写，如果写了，写成json，jq内部会帮我们进行JSON.parse()的转化。注意：
- 如果写成json，并且服务端返回的就是json格式字符串，在回调函数中获取的实参就是转化完成的js对象，直接按照对象使用即可；
- 如果写成json，但是返回的不是json格式的数据，那么将会返回null。
使用演示:
html代码：

<script src="jquery.min.js"></script>
<script>
        $.get("01-jq-get.php",{name:"yijiang",des:"大帅比"},function (data) {
            console.log(data);
        });
</script>

php代码：

<?php
        echo $_GET['name']."是一个".$_GET['des'];
?>

结果：yijiang是一个大帅比

`$.post`方法

使用 post 请求功能以取代复杂 $.ajax；
请求成功时可调用回调函数；
如果需要在出错时执行函数，请使用 $.ajax。

参数

参数	说明
url	必选。发送请求地址
data	可选。待发送 Key/value 参数
callback	可选。发送成功时回调函数
type	可选。返回内容格式，xml, html, script, json, text, _default。

html代码：

<script src="jquery.min.js"></script>
<script>
    $.post("02-jq-post.php",{name:"mage",des:"大美妞"},function (data) {
        console.log(data);
    });
</script>

php代码：

<?php
    echo $_POST['name'].'是一个'.$_POST['des'];
?>

结果：mage是一个大美妞

`$.getJSON`方法

在 jQuery 1.2 中，您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据：
如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
注意：此行以后的代码将在这个回调函数执行前执行。

参数：

参数	说明
url	必选，发送请求地址。
data	待发送 Key/value 参数。
callback	载入成功时回调函数。

html中代码：

<script src="jquery.min.js"></script>
<script>
    $.getJSON('02-jq-post.php',function (data) {
        console.log(data);
    })
</script>

php中代码：

<?php
    echo file_get_contents('xxx-json.json');
?>

json文件代码：

{
    "name":"jiang",
    "age":"16",
    "skill":"撩汉"
}

结果：Object {name: "jiang", age: "16", skill: "撩汉"}

格式化表单`$('form').serialize()`

我们在向服务器提交数据时，如果使用的是Ajax需要手动将数据格式化，转化成类似name=fox&age=18这样的格式，jQuery已经帮助我封装好了一个格式化数据的方法。

语法:$(selector).serialize() 直接可以将form中拥有name属性的表单元素的字，进行格式化。
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试jq_serialize方法</title>
  <script type="text/javascript" src="./files/jquery.min.js"></script>
  <script type="text/javascript">
      $(function(){
          $("#getFormInfo").on("click",function(){
              var info = $("#testForm").serialize()
              console.log(info);
          })
      })
  </script>
</head>
<body>
  <form id="testForm">
      <input type="text" placeholder="您的姓名" name="userName">
      <input type="text" placeholder="您的爱好" name="userHabbit">
      <input type="text" placeholder="您最喜爱的食物" name="userHabbit">
  </form>
  <input type="button" value="格式化表单数据" id="getFormInfo">
</body>
</html>

演示效果：userName=yijiang&userHabbit=swimming&userHabbit=meat

`$.ajax({})`方法

$.ajax()方法相比于前面的方法,拥有更为自由的定制性,可以替换$.get(),$.post()方法。

参数:
在w3cSchool_$.ajax_Api（http://www.w3school.com.cn/jquery/ajax_ajax.asp）中，关于参数只有下列一个。实际使用中，传递的是一个对象；
而对象的属性在页面的下方（如图可略）

参数	描述
settings	可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。

回调函数
如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。
beforeSend：在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error：在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter：在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
success：当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete：当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。
示例代码:
这里演示的是常用的属性

$.ajax({
        url:'01.php',   //请求地址
        data:'name=fox&age=18',     //发送的数据
        type:'GET',     //请求的方式
        success:function (argument) {},     // 请求成功执行的方法
        beforeSend:function (argument) {},  // 在发送请求之前调用,可以做一些验证之类的处理
        error:function (argument) {console.log(argument);},   //请求失败调用
});

案例：注册界面

模板插件

模版引擎简介

我们在使用ajax请求数据时，返回的如果是一个JSON格式的字符串，我们需要将其包装到对应的HTML代码中，再添加到页面上，才能看到效果。那么这个包装得过程有没有简单的方法呢？
假设有如下数据(javascript中)

var obj = {
     name:"fox",
     age:18,
     skill:"卖萌"
};

希望包装为:

<ul>
  <li>姓名:fox</li>
  <li>年龄:18</li>
  <li>爱好:卖萌</li>
</ul>

定义模板，替换:
其间需要我们使用对象替换的位置为<%= 属性名 %>部分，如果可以：读取模板->传入对象->完成替换->返回html代码实现这样的步骤，那么就能够完成我们的模板操作了

<ul>
  <li>姓名:<%= name %></li>
  <li>年龄:<%= age %></li>
  <li>爱好:<%= skill %></li>
</ul>

模版插件原理

我们定义一段文本作为模板，读取文本，使用特殊的符号<%= 属性名 %>，通过正则表达式找到这些特殊的符号进行替换，是不是就实现了这样的效果呢？

定义正则表达式:
想要匹配<%= 属性名 %>，我们可以定义如下正则(javascript中)：

JS中的RegExp对象:
        创建：
            创建方法1: var reg = new RegExp("正则")
            创建方法2: var reg = /正则/;    推荐使用这种
        使用:
            reg.exec(string) 可以检测并返回字符串

正则含义：
        <%:以 <% 开始
        =\s* "="号之后有0个或多个空白字符
        ([^%>]+\S): 匹配除了%>以外的所有字符(至少1个)
        \s*:0个或多个空白字符
        %>:以%>结束

var reg = /<%=\s*([^%>]+\S)\s*%>/;

基本使用

定义好作为模板的文本；
使用正则表达式进行匹配替换即可。

// 定义文本
var str = '大家好，我叫<%= name %>，我今年<%= age %>，我的爱好为:<%= skill %>';
// 定义数据
var data = {
    name: 'jiang',
    age: 10,
    skill:'打篮球'
};

// 快速的创建方法,好处,直接使用 \ 即可 不需要考虑 转义
var reg = /<%=\s*([^%>]+\S)\s*%>/;
// 返回的是一个对象(数组)
var match = null;

// 使用  while循环 进行检查,知道没有匹配的内容
while (match = reg.exec(str)){
    // 匹配到的字符串
    var mathString = match[0]
    // 子表达式匹配到的字符串
    var subString = match[1];
    // 打印文本内容
    console.log("循环中:"+str);
    // 替换字符串的内容
    str = str.replace(mathString,data[subString]);
}
console.log("循环完毕:"+str);

演示结果为:
循环中:大家好，我叫<%= name %>，我今年<%= age %>，我的爱好为:<%= skill %>
循环中:大家好，我叫jiang，我今年<%= age %>，我的爱好为:<%= skill %>
循环中:大家好，我叫jiang，我今年10，我的爱好为:<%= skill %>
循环完毕:大家好，我叫jiang，我今年10，我的爱好为:打篮球
常见的模板插件：
BaiduTemplate(百度开发)：http://tangram.baidu.com/BaiduTemplate/
ArtTemplate(腾讯开发)：https://github.com/aui/artTemplate
velocity.js(淘宝开发)：https://github.com/shepherdwind/velocity.js/
Handlebars：http://handlebarsjs.com/

ArtTemplate基本使用

模板引擎的用法大同小异，ArtTemplate由于性能优秀，这里我们演示ArtTemplate的用法：
导入模板引擎：将下载好的ArtTemplate导入到页面中：

<script type="text/javascript" src = "./files/template-native.js"></script>

定义模板：
<% %>：这样的语法是定义逻辑表达式；
<%=内容 %>：这样的语法为输出表达式；
注意：这里的模板type='text'如果写成javascript会执行：

<script type="text" id = "templ01">
        <ul>
            <li><%=name %></li>
            <li><%=age %></li>
            <li><%=skill %></li>
            <li>
                <ul>favouriteFood
                <% for(var i = 0 ;i < favouriteFood.length;i++) {%>
                    <li><%=favouriteFood[i] %></li>
                <% } %>
                </ul>
            </li>
        </ul>
</script>

定义对象；
调用模板引擎的方法，传入对象，我们可以使用template(模板id,数据);

// 调用模板引擎的方法
var backHtml = template("templ01",data);
// 返回值就是填充好的内容

总结：
1.导入模板对象；
2.定义模板；一般情况下，模板使用中，type必须写，写成非javascript的内容，若果留空，会默认解析成为js，会报错。
3.定义对象；
4.调用模板引擎的方法，传入对象；
注意点：
一、如果出现template error错误，一般模板出错，去查找模板：1.for循环写了开头，没有写结尾；2.for循环中的分隔符写成了逗号。
二、只能接受对象，不能接受数组。
示例：

<body>
    <script src="template-native.js"></script>
    <script type="text" id="temp">
        <% for(var i=0; i<people.length; i++){ %>
            <ul>
                <li><%= people[i].name %></li>
                <li><%= people[i].skill %></li>
            </ul>
        <% } %>

    </script>

    <script>
        var data = {
            people:[
                {name: "baby", skill: "演戏"},
                {name: "yijiang", skill: "负责帅"},
                {name: "mage", skill: "负责美"}
            ]
        };
        var backHtml = template("temp",data);
        document.write(backHtml);
    </script>
</body>

使用演示：luowang

同源以及跨域

同源

同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同。

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

跨域方案

顶级域名相同的可以通过domain.name来解决，即同时设置 domain.name = 顶级域名（如example.com）;
document.domain + iframe
window.name + iframe
location.hash + iframe
window.postMessage()
浏览器中跨域请求方案:http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html

JSONP

JSON with Padding其本质是利用了html标签的src属性标签具有可跨域的特性，实现跨域用的是script标签，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成；
使用script标签，<script src="xxx.php"></script>，默认会发送一个get请求到对应的php页面；
只能以GET方式请求
注意只能够通过get方法；
服务端代码：

<?php
    // echo "alert('天气不错哦')";
    $callBack = $_GET['callback'];
    $arr = array(
        'name' =>'大帅比' ,
        'color' =>'red'
    );
    echo $callBack."(".json_encode($arr).")";
?>

前端代码:注意,域名不同
- 核心是通过script标签的src属性提交get请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script type="text/javascript">
        function fn(data){
             console.log(data);
        }
    </script>

    <script type="text/javascript" src='http://www.section02.com/seciton02_jsonP.php?callback=fn'></script>
</head>
<body>
    <h1>区域1的页面_jsonP演示</h1>
</body>
</html>

如果我们定义的fn方法有形参，会将从服务器拿到的括号中的值传递给形参，并且如果传递过来的是json字符串，会自动帮我们转化为js对象。

jq已经帮我们封装好了jsonp的请求，直接使用即可：

dataType预期服务器返回的数据类型为jsonp；
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数；
如果需要给jsonp指定回调函数：通过jsonpCallback为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。

<script>
    function eatFood() {
        console.log("好好吃哟");
    }
</script>
<script src="../03-jq-ajax/jquery.min.js"></script>
<script >
    $.ajax({
        url:"01-jsonp-script.php",
        dataType:"jsonp",
        callback:eatFood()
    })
</script>

jQuery 的$.ajax()

方法当中集成了JSONP的实现，可以非常方便的实现跨域数据的访问。
dataType: 'jsonp' 设置dataType值为jsonp即开启跨域访问；
jsonp可以指定服务端接收的参数的“key”值，默认为callback；
jsonpCallback可以指定相应的回调函数，默认自动生成
示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script type="text/javascript" src='jquery/jquery-3.0.0.min.js'></script>
</head>

<body>
<h1>区域1的页面</h1>
    <input type="button" name="" onclick='sendAjax()' value="jquery区域请求">
</body>

</html>

<script type="text/javascript">
    function sendAjax(){
        $.ajax({
            url:'http://www.section02.com/sectcion02_jqJsonp.php',
            type:'post',
            dataType: 'jsonp',
            data:{name:'itt'},
            success:function(data){
                console.log(data);
            }
        })
    }
</script>

天气预报

一些平台为我们提供了可以直接使用的接口，我们只需要按照他们提供的格式提交数据即可。
百度车联网api：http://developer.baidu.com/map/carapi-7.htm
开发者秘钥ak:0A5bc3c4fb543c8f9bc54b77bc155724

瀑布流

什么是瀑布流?

瀑布值得是从上往下流动的水，并且水量也较大，瀑布流指的是内容、信息，像瀑布一样从上往下进行排布。
瀑布流：示例取自：堆糖网：http://www.duitang.com/topics/

瀑布流实现原理

瀑布流的核心为：
宽度一致，高度参差不齐；
新增行的内容，优先添加到最矮的下方。
难点：
当我们到了新一行时，如何获取上一行高度最小的行高？
可以定义数组用来保存高度，新增了以后替换数组中原始的高度即可。
实现技术：
Ajax；
jq->Ajax请求；
模板引擎->渲染页面。
知识点：
模板引擎；
jqajax请求；
php中，字符串和php对象的相互转化；
jq插件写法：瀑布流的算法。
补充：
可以直接使用jq对象点出来的语法，除了jq本身，还有jq的插件，这里我们将瀑布流封装成jq插件。
jq插件：
- $.fn.extend，调用：$('xxx').fun;；
- $.extend，调用：$.fun;；
- 注：这里的fun跟我们定义的时候写的属性名一致；
- jq插件命名一般建议使用jQuery.插件名.js格式；
- 插件中的方法名建议和插件名一致。

// 为 jq 添加 插件
// 注册完毕以后 使用 $("xxx").fun 使用
$.fn.extend({
    study:function () {
        console.log('我要好好学习了哟');
        // 在这个方法中 我们可以使用 $('选择器')获取到jq对象
        // this 就是我们获取到的jq对象
        // 注意：容易搞混 jq对象跟dom对象 所以这里建议使用以$开头的this替代
        // 一看到 $_开头的，就知道是jq对象，防止跟dom对象弄混
        var $_this = this;
        $_this.css({backgroundColor:'yellow'});
        // jq有一个特点是 链式编程
        // 为了能够链式编程 建议 return 当前使用的jq对象
        return $_this;
    }
});
// 注册完毕以后 使用$.fun 使用
$.extend({
    play:function(){
        console.log('我要玩游戏了哟');
    }
})

案例：（百度开发平台）

1.天气展示；
2.近期电影展示。

11-Ajax详解
Ajax的基本概念及使用同步&异步同步：必须等待前面的任务完成，才能继续后面的任务；异步:不受当前主要任务的...
Mysql性能调优
SQL执行原理详解连接器详解分析器详解优化器详解执行器详解 Innodb的Buffer Pool机制详解 ...
C/C++的30个冷知识
数据格式详解输入输出函数详解字符串处理函数详解内存函数详解类详解数据格式详解 2^8=256（同样是一个...
TSNE 详解
TSNE 详解 TSNE 详解
SwiftSyntax 详解
SwiftSyntax 详解SwiftSyntax 详解
深入理解相机五(硬件抽象层HAL)
一、Android 基础学习 Activity 使用详解 Service 使用详解 Broadcast 使用详解 ...
Lucene和ElasticSearch基本概念
Lucene索引详解（IndexWriter详解、Document详解、索引更新）https://www.cnbl...
自定义View的各个重要的类和属性
1 、Path类详解 2、Paint详解 3、Canvas详解 4 、绘制雷达图
SpringBoot详解（一）-快速入门
SpringBoot详解系列文章：SpringBoot详解（一）-快速入门SpringBoot详解（二）-Spri...
SpringBoot详解（三）-Spring Boot的web开
SpringBoot详解系列文章：SpringBoot详解（一）-快速入门SpringBoot详解（二）-Spri...

11-Ajax详解

Ajax的基本概念及使用

同步&异步

异步更新网站

Ajax概念

XMLHttpRequest

写Ajax的步骤

发送Ajax请求，使用的是js

练习：异步切换明星头像

XMLHttpRequest_API讲解

创建XMLHttpRequest对象(兼容性写法):

发送请求:

POST请求注意点:

onreadystatechange事件

服务器响应内容

服务器

php如何读取文本数据

Ajax数据传输XML

XML简介

XML语法

XML解析

PHP中设置Header

Ajax中获取xml：

实际开发中xml用的频率不是很高，敲两遍就可以了。

案例：重写明星头像

Ajax传输JSON

JSON语法

JSON解析

JSON图

JavaScript中

PHP中

解析JSON的完整写法：

Ajax工具函数封装

原生Ajax写法

抽取公共部分

案例：聊天机器人

jQuery中的Ajax

JQuery中Ajax使用

$.get()方法

$.post方法

$.getJSON方法

格式化表单$('form').serialize()

$.ajax({})方法

案例：注册界面

模板插件

模版引擎简介

模版插件原理

基本使用

ArtTemplate基本使用

使用演示：luowang

同源以及跨域

同源

跨域方案

JSONP

jq已经帮我们封装好了jsonp的请求，直接使用即可：

jQuery 的$.ajax()

天气预报

瀑布流

什么是瀑布流?

瀑布流实现原理

案例：（百度开发平台）

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

创建`XMLHttpRequest对象`(兼容性写法):

`$.get()`方法

`$.post`方法

`$.getJSON`方法

格式化表单`$('form').serialize()`

`$.ajax({})`方法