ajax1

一、Ajax概述

1、Ajax介绍

（1）AJAX全称:

Asynchronous: 异步 synchronous(同步)

Javascript:核心技术还是js

And:

Xml:主要作用保存数据和作为不同开发语言之间传输数据的标准

直译:异步的javascript和xml

简单的说Ajax就是一门可以与服务器进行异步或者是同步交互的一门技术,可以实现页面无刷新与服务器进行交互(数据的交互)。

同步交互:在一个时间段内只能有一个进程在执行。

异步交互:在一个时间段内可以有多个进程在执行。

2、Ajax实际应用场景

1、无刷新搜索

2、校验邮箱（用户名）唯一性

3、无刷新登录或者注册

4、无刷新分页

好处：无刷新分页只是获取分页部分的数据，其他地方的数据保持原样，这样可以减轻服务器和数据库的压力，还可以增加用户的体验。

结论：以上的ajax的案例都有一个最大的特点：页面无刷新。

3、Ajax的原理图

①传统的web应用程序原理图(无Ajax)

可以看出传统(无ajax)web应用程序,服务器在处理数据的时候,客户端浏览器不可以再发送请求，除非等服务端处理完之后。

②使用Ajax的web应用程序原理图

说明:其中的时间在前是因为异步处理

结论:使用Ajax的web应用程序原理图,服务器在处理数据的时候,客户端浏览器依然可以发送其他的请求到服务端,就是一个时间段内有可以多个进程在执行

4、Ajax的发展史

1999年，微软公司发布IE5浏览器的时候嵌入的一种技术。Ajax起初名字是XMLHttp

直到2005年Ajax才开始流行使用，该年google公司发布了一个邮箱产品gmail，内部的gtalk聊天工具有使用ajax技术 ,该事情引起人们对ajax的注意，并促成其被广泛使用，同时使得向来不被人们重视的javascript语言得到的大家的青睐（新名字XMLHttpRequest）

5、Ajax的技术集合

Ajax不是一个新的技术,核心技术还是js,它把很多知识揉在在一起综合使用.如:html,css,js,jq,xml,json,ajax对象

含有Ajax的web应用,就是创建Ajax对象,对象调用方法和属性的一个过程。

6、Ajax模拟请求

类似我们手动请求百度服务器

二、Ajax对象

1、创建ajax对象

因为Ajax的核心技术是JavaScript,其运行在浏览器中,浏览器产生于不同的厂商,会有兼容性,同样的创建Ajax对象也是有兼容性.

创建Ajax对象的主要考虑主流的浏览器（W3C）还有低版本的IE浏览器。

主流W3C标准浏览器 (google,firefox,operate,高版本的IE浏览器):

var xhr = new XMLHttpRequest()(重点掌握此方式)

低版本的IE浏览器(IE6,7,8)(了解即可)

var xhr = new ActiveXObject('Microsoft.XMLHTTP');

更低版本的IE浏览器(了解即可)

var xhr = new ActiveXObject("Msxml2.XMLHTTP");

实例代码:

结果：

2、封装兼容各浏览器的Ajax对象

新建一个.js文件,将兼容浏览器的ajax对象封装到函数中,然后在需要页面中引入js文件即可

因为不知道用户使用什么浏览器访问的ajax程序,所以我们需要创建兼容所有浏览器的Ajax对象。

实例代码：

调用方法：

3、Ajax对象的属性和方法

说明:readyState是指ajax请求返回的状态码,而status返回的是当前请求的http状态码.

4.ajax实现异步获取数据的过程[核心]

我们就是从xhr.open(‘post’,’请求地址’,true)中的请求地址中获取数据,把请求地址中echo,var_dump输出的数据响应给xhr.responseText,并作业务处理.

三、Ajax入门案例

1、使用Ajax的get请求获取服务器响应数据

（1）问题，Ajax可以接受服务器响应回来的哪些数据，采用什么协议?

一句话：浏览器可以接收的数据（html、css、js、xml、json）ajax都可以接收,采用http协议发送请求。

（2）实例代码

说明:在onreadystatechange()里打印xhr.readyState,只能监听1,2,3,4因为状态0没有相对变化的过程

在服务端通过var_dump()和echo输出的数据都能通过xhr.response接收到.

效果：

F12在控制台中network---->Type看类型

（3）Ajax中的get请求的总结（四步走）

1、创建ajax对象

2、给ajax状态的改变绑定监听的事件处理程序

3、建立一个http请求

4、发送一个http请求

2、使用Ajax之POST请求获取服务器数据

（1）发送post请求需要设置请求头:

注意:使用post请求需要设置请求头,作用是模拟form表单提交数据

在发送http请求之前,一定要设置请求头.(否则接收不到数据)

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

（2）实例代码

php输出数据(只要浏览器可以接受到的数据，ajax照样可以拿到)

结果：

Post请求发送的数据显示在 Form Data中,而get请求的数据显示在Query String Parameters中.

（4）Ajax中的post请求的总结

1、创建一个ajax对象

2、给ajax状态的改变绑定监听事件的处理程序，在处理程序中判断状态等于4，做自己的业务逻辑

3、建立一个http请求

4、设置post请求头，模拟form表单来提交数据

xhr.setRequestHeader(“Content-type”,’application/x-www-form-urlencoded’);

5、发送http请求

3、同步和异步的问题

Ajax同步执行(执行有先后顺序)：代码从上到下依次执行，只有等待ajax程序执行完毕之后，其后面的代码才会执行。

Ajax异步执行：代码从上到下依次执行，如果碰到异步的Ajax代码执行，则浏览器会新开一个线程去执行Ajax代码，对后面的代码没有影响。，要注意，Javascript引擎是单线程的执行js代码。（浏览器是多线程的）

4、进程和线程的认识

四、IE浏览器在get请求的缓存问题

1、缓存介绍

浏览器的第一次请求需要从服务器获得许多 css、img、js 等相关的文件，如果每次请求都把相关的资源文件加载一次，对带宽、服务器资源、用户等待时间都有严重的损耗，浏览器有做优化处理，其把css、img、js等文件在第一次请求成功后就在本地保留一个缓存备份，后续的每次请求就在本身获得相关的缓存资源文件读取就可以了，可以明显地加快用户的访问速度。css、img、js等文件可以缓存，但是动态程序文件例如php文件不能缓存，即使缓存我们也不要其缓存效果。

(仅有IE浏览器在get请求下会缓存动态程序文件（php）,post请求不会缓存)

2、IE浏览器缓存现象

说明：之所以IE会读取缓存文件，那是因为第二次和第一次请求的地址完全一致，IE
会直接读取缓存中的文件。

解决办法：让请求的url地址不一样就行。

3、解决IE浏览器缓存动态文件的办法

3-1、设置随机数

Math.random();

直接在open()方法的url参数中追加随机数，目的是改变每次请求的url，url地址不一样，则每次都会请求服务器最新的文件内容

请求的结果：

此办法虽然可以解决缓存问题，但是每次请求成功，都是在本地产生一个动态缓存文件。

3-2、设置时间戳

new Date().getTime()

http请求：

说明：这种加时间戳和上面的方式完全一样，只是时间戳一定是唯一的，不会重复。

3-3、设置请求头

xhr.setRequestHeader('If-Modified-Since','0'); // 值可以为1,2,3,4

解释:

当我们请求服务器上一个文件的时候,如果此次设置了这个请求头,会把这个请求头的值与所请求的服务器对应的文件的最后修改时间做个对比,如果对比时间一样,则读取本地的浏览器缓存文件,否则读取服务器上最新的文件内容

http请求过程,自动加了设置的请求头：

说明：此种方式虽然也可以解决读取缓存的问题，但是还是会生成一个动态缓存文件。

3-4、PHP服务端禁用缓存 :

在服务器端设置(php文件)

header("Cache-Control:no-cache,must-revalidate");

通过设置服务器的响应头告诉浏览器，请求的时候不要读取浏览器本地缓存文件，读取最新的文件。

http请求响应头，会携带上面所设置的：

说明：此种办法通过设置禁止生成缓存文件，可以解决不会在浏览器生成动态的缓存文件。

面试题:当一个项目上线了一段时间,中途修改了此项目的js或css文件,如何不让浏览器缓存?

如:传智,新浪等

五、案例-使用Ajax验证校验用户名

形如：

思路：

1、给文本框绑定失去焦点的事件

2、值不为空的时候获取文本框中的值发送ajax请求[不要发送无效请求,浪费系统资源]

3、php服务端依据ajax传递过来的值去mysql数据库做个匹配查询，是否占用可以输出一个标志，如：echo 1,可以使用，echo 0，被占用

4、ajax根据php输出的数据，做判断给用户提示

小功能:不为4时,给一个gif图片(玩命加载中.....)

思路有了？------》把思路转化成代码去实现

获取当前对象的方式[重点]

代码：

1、给input标签绑定失去焦点的函数

2、触发函数

3、php验证的逻辑

效果：

4、判断用户名的基本格式要求（不要做无用的请求

特别注意：特殊字符编码的问题

当我们在输入框中输入一些特殊字符如%,=，？&等或者是中文字符,因为在url地址中，其中&符号参数分隔符，为了避免服务端获取url地址中的参数产生歧义，我们可以通过JS中的一个函数encodeURIComponent()对用户输入的数据进行编码处理。

编码后的结果是对特殊符号形成了%跟着两位十六进制的数：

还可以通过正则进行验证（推荐使用）：

效果

六、案例-使用Ajax完成无刷新注册

1、html结构：

2、oninput事件

3、ajax提交

4、表单提交事件：

5、php处理程序

效果：

一、Ajax解析php输出xml格式数据

xml作用：保存数据和作为不同开发语言之间传输数据的标准。

代码：

php组装xml格式数据输出：

(在echo之前,一定要设置请求头,告诉浏览器以XML格式去解析,否则responseXML返回为null)

设置请求头:header('Content-Type:text/xml;charset=UTF-8');

设置了之后,var xml = responseXML返回的是个XML文档树结构对象,

Xml相当于document,为根节点,利用xml.getElementsByTagName(‘’)获取节点,并通过For循环获取数据[集合可以看为数组]

ajax请求：

核心代码:

结果：

注意:

如果加了header()头,只能用echo输出,用var_dump()输出会报错.[以后涉及ajax一律用echo输出数据]

以上php组装xml数据非常麻烦，标签需要自己拼接，占用的字符比较多，ajax请求的时候耗费更多的时间和流量。解决办法：采用json格式输出即可：

二、Ajax解析php输出json格式数据

[重点]多用于接口

注意:不论返回是json,xml,最终在php页面,echo都是输出字符串[在echo之前,转为对应的字符串格式]

Json: json_encode($arr);

Xml字符串输出之前加header();

php组装json数据输出：[json_encode把数组以json字符串的形式输出]

ajax获取：

结果：

JSON字符串的在线解析网站：

网站推荐：

在线json解析网站:json.cn

站长工具： http://tool.chinaz.com

程序员工具箱： http://tool.lu/

jq网站： jq22.com

jq插件懒人之家：http://www.lanrenzhijia.com/

模板下载： http://www.mycodes.net/

infoq (以后再看): http://www.infoq.com/cn

三、案例-省市联动

1、介绍

如下效果：

1、把地区数据表导入数据库

需求:找出所有的省份

select * from region where pid = 1;

找出广东省下面的所有的市：

找出广州下面的区县：

2、思路

思路（用代码实现）：

1、先在页面构建好三个select框，默认都是请选择

2、第一个select框先把所有的省份获取来，写在第一个select中

3、给省和市的select框绑定onchange事件，拉取对应的子级地区，赋值给对应的select框中

3、代码操作

1、构建select元素，绑定onchange事件

2、getRegion事件的处理程序

3、需要注意的两个地方

4、php获取对应的数据

效果：

补充：

创建option标签，追加到select中：

var op = new Option(text,value); // 形如： <option value=value>text</option>

select对象.options.add(op); // 获取select对象.appendChild(op);

四、Ajax跨域

1、介绍

因为由于浏览器的同源(域)策略,禁止ajax从一个域名请求另外一个域名上面的数据

2、跨域测试

跨域测试:使用Ajax请求第三方天气接口数据

接口地址:

http://www.weather.com.cn/data/sk/101010100.html

使用ajax做跨域示例：

结果失败，原因跨域了，由于浏览器同源策略：

3、如何才算跨域

如一个url地址如下:

http://www.abc.com:80/index.html

我们可以把上面的url地址分为四个部分:

协议:http,https

一级(顶级)域名:abc.com

二级域名:www.abc.com

端口号:http协议默认是80端口,https默认是443

以上四个部分,请求的时候只要有一个地方不一样都算做跨域请求

ajax所在地址	ajax请求地址	是否跨域,原因
http://local.com/index.html	http://native.com/index.php	跨域，域名不一样
https://www.abc.com/index.html	http://www.abc.com/index.php	跨域，协议不一样
https://www.abc.com/index.html	http://www.abc.com:88/index.php	跨域，跨域了，端口和协议不一样