1、 Ajax的作用
获取服务器的数据
2、 Ajax的效果
在不刷新整个页面的情况下，通过一个url地址获取服务器的数据，然后进行页面的局部刷新
3、 一些熟悉的场景
A、评论加载效果：http://view.news.qq.com/
B、用户名验证：如图1-1所示
图1-1 注册界面
4、 小结
六个字：局部 异步刷新
Ajax的全称：Asynchronous Javascript And XML，就是使用JS代码获取服务器数据
第2章基础常识铺垫1、 服务器与客户端
服务器和客户端其实都是电脑，下面从几个方面来介绍一下他们二者之间的差异：
A、 概念层面上的差异
a)服务器：能够提供某种服务的电脑
b)客户端：想使用服务器所提供服务的电脑
B、 硬件层面上的差异：
a)服务器：由于要给千千万万个客户端提供服务，因此一般来说，服务器的硬件配置要高一些
b)客户端：个人电脑、手机、平板等都可以称作为客户端
图2-1 服务器
图2-2 客户端
注意：服务器与客户端在硬件层面上并没有明显的划分，配置很差的个人电脑依然可以当作服务器使用，只不过这台服务器的速度慢一些而已。
C、 服务器能提供什么服务？
一些我们日常生活中常使用的功能，其实都是服务器所提供的服务。比如网页服务、邮箱服务、文件上传下载服务、聊天服务等等等等……
D、 服务器软件
既然服务器也是一台电脑，那这台电脑就必须要安装操作系统，否则就是一台裸机，啥事情都做不了，更不用说提供服务了。一般来说，服务器更多会选择Linux操作系统， 而个人电脑更多会选择安装Windows操作系统。
服务器能提供服务是由于在服务器操作系统上安装了很多软件，由这些软件对外提供服务，比如：
HTTP网页服务：apache、Tomcat、IIS等
文件上传下载服务：VsFtp等
邮箱服务：SendMail等
数据存储服务：MySql、Oracle等
小结：服务器就是提供服务的，客户端就是使用服务器所提供的服务。
2、 网路相关的概念
a)ip地址
地址是为了标注某个地点，方便查找。
互联网上就那么多公司，每家公司都有自己的服务器提供服务。通过ip地址就能找到特定的服务器，使用这台服务器提供的服务。
比如百度服务器的ip地址为：123.125.114.144
b)域名
由于IP地址是一串数字，人很难记忆。就好像经度纬度一样，人们能记忆下来的是地名。而域名就相当于是地名一样，方便人们查找到服务器。
比如说 www.baidu.com www.qq.com
查看本机的IP： ipconfig
图2-3 查看本机IP地址
查看域名的IP： ping baidu.com
图2-4 查询百度的ip地址
c)DNS域名解析服务器
DNS叫做域名解析服务器，提供域名与ip地址的映射关系。
访问服务器的流程：本机hosts文件-->DNS服务器-->服务器
本机host文件的路径为：C:\Windows\System32\drivers\etc\HOSTS
图2-5 域名请求流程
d)端口
前面我们说过，服务器就是提供服务的。ip地址是用来查找某一台服务器的。
域名是方便人们记忆的。DNS维护着域名和ip地址的映射关系。
所以通过域名是可以找到某一台服务器的
我们确实是可以通过域名来找到一台服务器，但是一台服务器可能提供多种服务，我们找到这台服务器的时候，究竟是想使用这台服务器的什么服务呢？这就使用端口号来进行区分
其实我们每次访问网页，最完整的写法应该是http://www.baidu.com:80 80这个端口比较特殊，可以省略不写
再比如我们在设置邮箱客户端的时候，也需要指定端口号：
图2-6 邮箱服务器设置
所以，端口是用来区分一台服务器上提供的不同服务的。
小结：ip地址是用来查找某一台服务器的。域名是方便人们记忆的。DNS维护着域名和ip地址的映射关系。端口是用来区分一台服务器上提供的不同服务的。
3、 通信协议
通信协议就是事先规定好的规则。
图2-7 通信协议
想一想人和人的交流是怎么进行的？说同一门语言才能交流无障碍
那机器与机器之间的交流也需要满足实现规定的规则。
客户端访问服务器，通过IP地址和端口已经找到了这台服务器了，这时候就认为是两台计算机在交流。
协议可以简单的认为是两台计算机交流时候说的话。
常见的协议：
HTTP、HTTPS 超文本传输协议
FTP 文件传输协议
SMTP 简单邮件传输协议
图2-8 邮件传输协议示例
在HTTP协议中，需要大致了解的是：请求头、响应头、请求体、响应体。
计算机世界中充满着各种各样的协议，任何一种协议都是约定一些规范。对于协议本身，里面的内容相当复杂，我们没有必要深究。
小结：通信协议就是计算机交流时事先约定的规则。
第3章wamp的安装配置1、 为什么要安装Wamp
将我们写的html界面以服务的方式分享给别人看，否则别人的电脑是无法看到我们所写的界面。
2、 Wamp是什么
Wamp指的是：windows、apache、mysql、php几个服务器软件的缩写，类似的还有Lamp：linux、apache、mysql、php
我们安装wamp可以认为把我们自己的电脑变成了一台服务器，服务器是干嘛的，提供服务的。Wamp可以让我们的电脑提供网页服务。其他电脑只需要通过ip地址或者域名就能够访问到对应的HTML界面。
3、 Wamp的安装
选择合适你操作系统的安装包，双击安装之后一路next即可完成安装。安装完成后，运行服务，当右下角的图标变为绿色，即代表服务安装成功。
，接下来将我们需要以服务方式分享给别人看的html文件放到C:\wamp\www目录下即可
4、 Wamp的简单配置
a)配置访问权限，默认情况下，apache提供的网页服务只允许localhost和127.0.0.1进行访问，我们需要对配置文件进行修改。配置文件位于：C:\wamp\bin\apache\Apache2.4.4\conf\httpd.conf 将268行的Deny from all改为Allow from all
b)网站根路径的配置，默认情况下，网站的根路径为C:\wamp\www，在此目录下的文件才可以以服务的方式提供给别人看，如果你不想使用这个目录，也可以进行修改。修改C:\wamp\bin\apache\Apache2.4.4\conf\httpd.conf文件，将DocumentRoot进行修改，如下图：
5、 虚拟主机的配置
如果一台服务器想提供多个站点，那么就需要对虚拟主机进行配置。
A、 打开httpd.conf文件
B、 打开C:\wamp\bin\apache\Apache2.4.4\conf\extra\httpd-vhosts.conf文件
C、 打开C:\Windows\System32\drivers\etc\HOSTS文件
第4章PHP基础语法1、 网站的分类：静态网站和动态网站
a)静态网站
全部由HTML代码格式页面组成的网站，没有数据库的支持，在网站制作和维护方面工作量较大
b)动态网站
动态网站并不是指具有动画功能的网站，而是指网站内容可根据不同情况动态变更的网站。一般情况下动态网站通过数据库进行架构。一般动态网站体现在网页一般是以asp，jsp，php，aspx等结尾，动态网页以数据库技术为基础，可以大大降低网站维护的工作量，维护方便
2、 PHP语法的基本结构
a)所有的PHP代码都要写到<?php … ?>里面
b)PHP文件可以和HTML相互结合进行使用
c)PHP 文件的默认文件扩展名是 ".php"
d)PHP代码必须在服务器上执行
3、 echo的使用
echo 的作用就是像页面当中输入字符串
print_r 输出复杂类型
var_dump 输出复杂类型
4、 变量的声明和变量的使用
无论是变量的声明还是变量的使用都需要用$符号
5、 字符串的拼接
字符串的拼接使用 . 进行连接
6、 PHP的执行原理
浏览器是不识别PHP代码，PHP代码必须在服务器中执行，双击打开php文件是达不到效果的。
7、 数组相关
a)一维数组
数组的定义
$arr = array();
$arr[0] = "zhangsan";
$arr[1] = "lisi";
$arr[2] = "wangwu";
或者
$arr = array("zhangsan","lisi","wangwu");
数组元素的访问：通过下标索引进行访问，如$arr[0]
数组的输出
print_r($arr);//不能使用echo进行数组的输出
var_dump($arr);//print_r 和var_dump输出复杂数据类型
echo Json_encode($arr);//把数组转化为json格式的字符串
b)二维数组
$arr = array();
$arr["zhangsan"] = array("age"=>18,"sex"=>"male","height"=>"170");
$arr["lisi"] = array("age"=>19,"sex"=>"female","height"=>"160");
$arr["wangwu"] = array("age"=>15,"sex"=>"male","height"=>"190");
c)PHP当中数组的特点：下标可以自定义
$arr = array("name1"=>"zhangsan","name2"=>"lisi","name3"=>"wangwu");
d)数组遍历
方式1：普通for循环
for($i=0;$i<count($arr);$i ) {
echo $arr[$i]."<br>";
}
方式2：foreach，这种方式更常用
foreach ($arr as $key => $value) {
echo $key.">>>" . $value ."<br>";
}
8、 PHP中的函数
A、 系统函数
a)json_encode php中将数组转化为json格式的字符串
b)var_dump
c)print_r
d)count
B、 自定义函数，和js类似，以function进行声明
9、 预定义变量
A、 请求类型
请求有时候是需要携带参数的，用来标识特定的要求，根据参数携带位置的不同可以简单的把请求分为Get请求和Post请求
a)Get请求:参数在URL后面，多个参数用&进行连接
b)Post请求: 参数在请求体中
B、 获取请求参数的值
a)$_GET[]
b)$_POST[]
第5章Ajax的使用Ajax简单的来说，就是一个异步的javascript请求，用来获取后台服务端的数据，而并不是整个界面进行跳转。
在元素JS中来实现Ajax主要的类就是XMLHttpRequest，它的使用一般有四个步骤：
1、 创建XMLHttpRequest对象
2、 准备发送网络请求
3、 开始发送网络请求
4、 指定回调函数
下面我们就通过代码来将这四个步骤实现出来。
第一步，创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
第二步：准备发送网络请求
xhr.open('get','./server/checkUsername.php?username=' uname,true)
调用open方法，这里面有三个参数，第一个参数代表的这个Http请求是以get方式还是post方式，如果是get请求，则如果有参数的话，则需要将参数跟在url的后面，而如果是post请求，参数应该跟在请求体中。
第二个参数就是这个Http请求的url地址。这个url地址后面是否有?加参数，得取决于第一个参数是get还是post
第三个参数代表这个Http请求是同步的还是异步的。false代表同步，true代表异步。这个参数一般都是写true，因为谁都不想在网络请求的时候，将这个网页卡住吧？不过对于学习来说的话，我们等等可以测试一下false的效果。
第三步：开始发送网络请求
xhr.send(null);
调用send方法，传递一个null。需要注意的是，如果你在第二步的请求方式为get的话，那么这里传null，如果在第二步的请求方式为post的话，这里就需要传入你所需要传递给服务器的参数了。因为之前我们说过，post请求的参数并不是跟在url后面的，而是跟在请求体中，而send方法中的参数就是会被设置到请求体中。因此，对于post请求，需要在这里传递参数。如：
var param = 'username=' uname;
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(param);
需要注意的是，如果使用post请求，并且又有参数的话，那么对于xhr就必须设置请求头信息，否则服务端接受不到参数。这个写法都是固定的，如有需要直接复制即可，不需要背。
第四步，指定回调函数，xhr.send方法调用完之后，http请求就发送出去了。由于在第二步中，我们设置了请求为异步请求，异步请求不能直接获得结果，只能通过监听回调的方式来得到响应数据。
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(xhr.responseText);
}
}
}
上诉代码的4和200代表的正常得到数据，服务器响应正常，那么这时候我们就可以通过xhr.responseText来获取到服务器给我们返回的数据了。
这里给出readyState和status的常用值代表含义的对应关系
好，通过上诉步骤，我们就能实现Ajax来完成异步请求了。
最后，还需要讲一个稍微不太重要的东西，就是XMLHttpRequest的创建对于低版本的IE需要做兼容。因为低版本的IE可能没有XMLHttpRequest这个对象。做法如下：
var xhr = null;
if(window.XMLHttpRequest){ //能力测试
xhr = new XMLHttpRequest();//标准
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
注册界面案例讲解：
当前端界面需要从服务器获取数据的时候，其实就只要访问一个url地址，制定特定的参数即可。这个url地址所对应的jsp也好，php也好其实服务器开发人员已经开发好了。服务器开发人员开发好相关的接口之后，会提供一份接口文档，在接口文档中会详细的说明你要获取什么数据的时候，访问什么地址，传入什么参数等等。下面就是几个简单接口文档中的内容。
01、验证用户名唯一性的接口
|
地址 |
/server/checkUsername.php |
|
作用描述 |
验证用户名是否可用 |
|
请求类型 |
Get请求 |
|
参数 |
uname |
|
返回数据格式 |
普通字符串 |
|
返回数据说明 |
如果服务器返回ok 代表用户名可用 如果服务器返回error，代表用户名不可用，此时需提示用户更换用户名 |
02、验证邮箱唯一性的接口
|
地址 |
/server/checkEmail.php |
|
作用描述 |
验证邮箱是否可用 |
|
请求类型 |
post请求 |
|
参数 |
e |
|
返回数据格式 |
数字 |
|
返回数据说明 |
如果服务器返回0 代表邮箱可用 如果服务器返回1，代表邮箱不可用，此时需提示用户更换邮箱 |
03、验证手机号码唯一性的接口
|
地址 |
/server/checkPhone.php |
|
作用描述 |
验证手机号码是否可用 |
|
请求类型 |
post请求 |
|
参数 |
phonenumber |
|
返回数据格式 |
Json格式 |
|
返回数据说明 |
手机号可用情况下返回如下： { “status“:0, “message“:{ “tips“:”手机号可用”, “phonefrom“:”中国电信” } } 手机号不可用情况下返回如下： { “status“:1, “message“: ”手机号已被注册” } |
1、 将Ajax请求改为同步请求
xhr.open('get','./server/checkUsername.php?username=' uname,false)
这样做的话，会有两个问题
第一：界面会卡顿，卡顿多长时间，取决于网络速度
第二：xhr.onreadystatechange的回调将不会被执行，需要修改代码后才能获取到数据，将回调去除即可。
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get","./server/checkUsername.php?uname=" usernameValue,true);
xhr.send(null);
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var result = xhr.responseText;
var username_result = document.querySelector("#username_result");
if(result == "ok") {
username_result.innerText = "用户名可以使用";
} else {
username_result.innerText = "用户名已经被注册";
}
}
}
2、 异步的底层原理
js中的异步的实现的原理是单线程加事件队列，js的代码执行是单线程的，所谓的单线程的含义是js的代码是从上往下按顺序依次执行的，一定是上一行代码执行完再执行下一行代码。事件队列可以认为是一个容器，这个容器中存储一些回调函数。这些回调函数只有在js代码全部执行完成之后，才有可能会去调用，因为js是单线程的，一次只能做一件事情。
window.onload、btn.onclick、setInterval等都是同样的原理。
Ajax中异步原理的分析图如下：
第7章数据格式1、 什么是数据格式
将数据通过一定的规范组织起来，叫做数据格式，例如
张三%男-李四#%男-王五0%女
这就是一种数据格式，这种数据格式组成的规则不通用。
2、 Xml数据格式
Xml数据格式是将数据以标签的方式进行组装，必须以<?xml version="1.0" encoding="utf-8" ?>开头，标签必须成对出现，也就是有开始标签就一定要有结束标签。xml是一个通用的标准，任何人都知道该如何解析它。例如：
<?xml version="1.0" encoding="utf-8" ?>
<students>
<student>
<name>张三</name>
<age>19</age>
<sex>男</sex>
</student>
<student>
<name>李四</name>
<age>23</age>
<sex>男</sex>
</student>
<student>
<name>王五</name>
<age>30</age>
<sex>女</sex>
</student>
</students>
缺点：体积太大，传输慢，元数据太多，解析不方便，目前使用的很少。
3、 Json数据格式
Json数据格式类似于js中的对象方式，通过key-value的形式组装，是一个通用的标准，任何人都知道如何解析它。
{
"student":[
{
"name":"张三",
"age":"19",
"sex":"男"
},
{
"name":"李四",
"age":"23",
"sex":"男"
},
{
"name":"王五",
"age":"30",
"sex":"女"
}
]
}
优点：体积小，传输快，解析方便。
Json数据格式的要求：
和js中的对象基本一致，不过需要注意以下几点：
A 整个数据被{}包含
B 或者整个数据被[]包含
C key值为引号
案例接口如下：
01、获取图书信息接口
|
地址 |
/server/getBooks.php |
|
作用描述 |
获取图书信息 |
|
请求类型 |
Get请求 |
|
参数 |
无 |
|
返回数据格式 |
Xml格式 |
|
返回数据说明 |
name为书名 author为作者 desc为描述，样例数据如下 <booklist> <book> <name>三国演义</name> <author>罗贯中</author> <desc>一个杀伐纷争的年代</desc> </book> </booklist> |
02、获取学生信息接口
|
地址 |
/server/getStudents.php |
|
作用描述 |
获取所有学生信息 |
|
请求类型 |
Get请求 |
|
参数 |
无 |
|
返回数据格式 |
json格式 |
|
返回数据说明 |
name为姓名 age为年龄 sex为性别，样例数据如下 [ { "name":"张三", "age":"19", "sex":"男" } ] |
在之前的案例中，我们已经获取了好几次服务器的数据，每当我们需要获取数据的时候，都要写1234四个步骤，略显麻烦，接下来我们需要做的就是将Ajax的几个步骤进行封装，封装到一个方法中。
对于封装方法，我们主要要考虑几个方面：
1、 哪些东西是变的。
2、 哪些东西是不变的。
3、 如何将结果通知调用者。
4、 如何调用方便。
根据之前案例的经验，我们知道，不同场景的ajax调用，调用方法get还是post这个是有可能发生改变的，调用url地址也是会变的，请求参数也是会变的，返回数据的类型也是会变的。对于发生改变的东西可以通过参数传递的方式实现。
基础代码例如创建XMLHttpRequest对象，准备发送、执行发送，响应回调中有些代码也是固定不变的。
将结果通知调用者也可以通过在调用时传入一个方法就可实现。
综上所述，代码可以封装成以下形式：
function myAjax(type,url,params,dataType,callback){
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if(type == "get") {
if(params && params != "") {
url = url "?" params;
}
}
xhr.open(type,url,true);
if(type == "get") {
xhr.send(null);
} else if(type == "post") {
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(params);
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var result = null;
if(dataType == "xml") {
result = xhr.responseXML;
} else if(dataType == "json") {
result = xhr.responseText;
result = JSON.parse(result);
} else {
result = xhr.responseText;
}
if(callback) {
callback(result);
}
}
}
};}
}
现在还差最后一个步骤，如何调用方便。对于目前的封装，我们可以很容易可以发现这个封装方法的两个缺点：
1、 参数的顺序不可改变
2、 参数没有默认值，每次都得传递
这两个缺点可以通过一个小技巧就可解决，我们将封装的参数变为一个对象即可。得到如下代码：
function myAjax2(obj) {
var defaults = {
type:"get",
url:"#",
dataType:"json",
async:true
};
for(var key in obj) {
defaults[key] = obj[key];
}
//使用default中的属性，进行ajax请求的1234四个步骤即可
}
第9章jQuery中使用ajax下面我们来看看jQuery中，如何进行ajax方法的调用。和我们的思路完全一样。
对于jQuery中关于ajax的封装，它提供了很多方法供开发者进行调用。不过这些封装都是基于一个方法的基础上进行的修改。这个方法就是$.ajax()
在这部分的学习中，我们主要关注3个方法
1、$.ajax()
2、$.get()
3、$.post()
我们首先先来看$.ajax()
$.ajax()的使用和我们自己的myAjax2使用起来非常的类似，同样是传入一个对象，有些参数不传递的话，也具有默认值，思想和实现过程和myAjax2如出一辙。
$.ajax({
url: url,
data: {},
success: function(result){},
dataType: "json"});
jQuery中对于网络请求，还有其他一些方法，但是本质上都是对XMLHttpRequest的封装。如：$.get()和$.post();
看这两个方法很容易就知道$.get是针对get请求的，$.post针对的是post请求，调用方法如下：
$.get(url "?" params,function(result){});
$.post(url,{key1:value1,key2:value2},function(result){});
第10章跨域1、 跨域的概念：
下面要介绍一个知识叫做跨域，这个知识点是源于一个叫做同源策略的东西。
同源策略是浏览器上为安全性考虑实施的非常重要的安全机制。Ajax默认是能获取到同源的数据，对于非同源的数据，ajax默认是获取不到的。
下面举一个例子，来看看什么叫做同源。
比如有一个页面，它的地址为http://www.example.com/dir/page.html这个网址，在这个网址中，要去获取服务器的数据，获取数据的地址如下所示，在下面的地址中，有的是同源，有的是非同源。
|
URL |
结果 |
原因 |
|
https://www.example.com/dir/other.html |
不同源 |
协议不同，http与https |
|
http://en.example.com/dir/other.html |
不同源 |
域名不同 |
|
http://www.example.com:81/dir/other.html |
不同源 |
端口不同 |
|
http://www.example.com/dir/page2.html |
同源 |
协议、域名、端口都相同 |
|
http://www.example.com/dir2/other.html |
同源 |
协议、域名、端口都相同 |
所谓的同源就是协议、端口、域名三者都完全一样，如果我们使用ajax来请求非同源路径下的数据，那么将会报如下错误：
在之前的案例中，我们都能够成功的获取到服务器的数据，那是因为服务器的接口地址和前端界面都处于同源状态下。
那我们需要处理获取非同源数据获取的情况吗？答案是肯定的。因为前端界面访问非同源的服务器的这种需求是非常常见的，比如在前端界面中获取天气数据，天气数据肯定是存在于别人的服务器上的，我们如果不能使用ajax进行访问的话，那么该怎么办呢？这里就需要使用到跨域了。
所以，先把概念理解清楚。不管是ajax还是跨域，都是为了访问服务器数据。简单来说：Ajax是为了访问自己服务器的数据，跨域是为了访问别人服务器的数据。
2、 跨域的实现
XMLHttpRequest对象默认情况下是无法获取到非同源服务器下的数据。那么怎么获取别人服务器的数据呢？使用XMLHttpRequest是达不到的，我们只能另辟蹊径。
我们可以通过script标签，用script标签的src属性引入一个外部文件，这个外部文件是不涉及到同源策略的影响的。
例如：
<script type="text/javascript" src="http://img.studyofnet.comhttp://www.lisi.com/test.js"></script>
跨域的本质其实就是服务器返回一个方法调用，这个方法是我们事先定义好的，而方法中的参数就是我们想要的数据。
A、访问外部js文件
B、访问外部php文件
C、动态创建script标签传入动态参数
D、前端界面决定方法名称
E、给window增加属性进行方法定义
小案例：淘宝提示词接口、百度提示词接口
案例接口如下：
01、淘宝提示词接口
|
地址 |
https://suggest.taobao.com/sug |
|
作用描述 |
获取淘宝提示词接口 |
|
请求类型 |
Get请求 |
|
参数 |
q：关键字 callback：回调方法名称 如果传递中文的话，得多加入一个参数code:utf-8 |
|
返回数据格式 |
jsonp格式 |
02、百度提示词
|
地址 |
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su |
|
作用描述 |
获取百度提示词 |
|
请求类型 |
Get请求 |
|
参数 |
wd:关键字 cb:回调函数名称 |
|
返回数据格式 |
jsonp格式 |
3、 跨域的封装
4、 将跨域的封装和之前ajax的封装结合在一起
5、 了解一下jQuery中跨域的实现
//使用jQuery来获取跨域的数据
//dataType:"jsonp"
//key默认就是callback
//value的值以jQuery开头的字符串，这个字符串就是函数调用的名称
$.ajax({
url:"https://suggest.taobao.com/sug",
data:{q:keywordValue},
success:function(data){
console.log(data);
},
dataType:"jsonp",
jsonp:"callback",
jsonpCallback:"haha"
});
使用jquery来获取跨域数据，dataType一定要是jsonp，否则会出现同源策略的错误，jsonp就是服务器需要获取方法名称的key值，默认值是callback，如果服务器不是通过callback来获取方法名称，那么我们需要显示的指定jsonp，jsonpCallback指定的是函数调用名称，这个属性无关紧要。
第11章模板引擎的使用
无论是Ajax还是跨域，目的都是为了获取服务器的数据，获取数据之后将前端界面进行渲染。怎么渲染前端界面呢？前端界面都是由标签构成的，所以前端界面的渲染主要做的就是生成html标签。
生成html标签我们可以通过拼接字符串的方式来实现。这种方式在标签结构比较复杂的情况之下很不好操作和后期的维护，并且容易出错。接下来就介绍一种技术叫做模板引擎，通过模板引擎我们可以很方便的生成html标签。
模板引擎的本质：将数据和模板结合起来生成html片段。所以模板引擎需要两个组成部分：模板和数据，通过数据，将模板指定的标签动态生成，方便维护。
常见的模板引擎有很多，这里介绍一个效率最高的模板引擎artTemplate，这是腾讯公司出品的开源的模板引擎，在github上可以下载到源代码。
使用步骤如下：
1、引入js文件
2、定义模板
3、将数据和模板结合起来生成html片段
4、将html片段渲染到界面中
基本语法：
得到数据中的值{{value}}
循环操作{{each result as value i }}{{/each}}
转义：#的使用{{#value}}
条件判断{{if xxx}}{{/if}}
技巧：有时候有可能需要对原始数据进行加工操作
第12章案例讲解1、天气查询案例
接口地址如下：
|
地址 |
http://cdn.weather.hao.360.cn/api_weather_info.php |
|
作用描述 |
获取天气信息 |
|
请求类型 |
Get请求 |
|
参数 |
app:hao360 固定参数 code：城市的编号（101010100北京，101020100上海，101280101广州，101280601深圳） _jsonp:回调函数名称 |
|
返回数据格式 |
jsonp格式 |
|
返回字段说明 |
area:地区信息 pm25：pm2.5数据 pubdate：数据发布日期 pubtime：数据发布时间 time:时间戳 weather：天气信息 date:时间 day：白天 night：黑夜 dawn：黎明 |
2、手机号码查吉凶
使用www.mob.com提供的数据服务来得到我们想要的数据。
第三方接口的使用一般来说，都是需要注册、创建应用、申请appkey这几个步骤，然后按照文档中的要求进行api接口的调用即可。
获取服务器数据小结：
A、如果前端界面访问的是自己的服务器数据，那么情况比较简单。使用ajax就可以了。
B、如果前端界面访问的是别人服务器的接口，那么此时就应该使用jsonp了。
但是使用jsonp也不是瞎使用，得看别人服务器所返回的数据是否是jsonp形式的，如果是的话，那么就按照jsonp的使用方法就能得到对应数据。如果不是，那么jsonp也不好使，那么此时应该怎么办呢？应该借助自己的服务器做为中转。
C、使用自己服务器做中转
PHP中访问一个url接口的方式：
<?php
//在php中,获取一个链接中的数据
//设置编码
header("Content-Type: text/plain; charset=utf-8");
//使用curl进行网络数据访问
$ch = curl_init();
//网络访问的url地址
$url = "http://xxx";
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
// 执行HTTP请求
curl_setopt($ch , CURLOPT_URL , $url);
//得到数据
$res = curl_exec($ch);
echo $res;
?>
,
