ajax介绍+Ajax对象常用属性与方法.docx

曾被大佬忽视的技术——Ajax上

目录

TOC\o1-3\h\z\u曾被大佬忽视的技术——Ajax上 1

一、Ajax发展历史 3

1、历史起源 3

2、什么是Ajax 3

3、Ajax属于客户端语言 3

4、Ajax运行平台 3

5、Ajax运行机制 4

1）传统模式下的同步请求 4

2）Ajax模式下的异步请求 4

6、Ajax的应用场景 5

7、快速入门 5

二、创建Ajax对象 6

1、创建Ajax对象 6

2、封装Ajax对象 7

3、Ajax对象中的常用属性与方法 8

1）常用方法： 8

2）常用属性： 8

三、Ajax请求中的GET请求 9

1、Ajax中的get请求五步走： 9

例1：通过Ajax的GET请求发送参数 9

例2：通过ajax计算两个数的和 10

例3：判断用户名是否可用 12

2、echo与return的区别 13

四、Ajax中的get请求缓存问题 14

1、通过随机数解决缓存问题 14

2、通过时间戳的方式解决缓存问题 15

3、通过缓存文件的最后修改时间来解决缓存问题 15

4、通过设置响应头信息来解决缓存问题 16

五、Ajax中的post请求 17

1、回顾get与post请求的区别 17

2、Ajax中的post请求 17

例1：通过Ajax实现两个数的求和 17

例2：无刷新录入功能 18

六、Ajax中的XML 19

1、什么是XML 19

2、XML主要作用？ 19

3、PHP与XML 20

4、PHPDOM 20

5、PHPSimpleXML 20

6、Javascript中的DOM模型 20

7、Javascript中解析XML 21

例1：求两个数的四则运算 21

例2：通过Ajax+XML获取分类信息，并将其存储在select下拉列表中 23

七、作业 24

一、Ajax发展历史

1、历史起源

1998年 微软公司IE5XMLHTTP（技术）

2005年谷歌Gmail（邮箱）、谷歌地图XMLHttpRequest

Node.js

2、什么是Ajax

Asynchronous：异步

JavaScript：JS

And：和

XML：XML

所谓的Ajax就是基于Javascript+XML的异步请求

3、Ajax属于客户端语言

HTML

CSS

Javascript

Ajax

服务器端语言

PHP

.NET

Java

4、Ajax运行平台

GoogleChrome

Mozilla

Firefox

InternetExplorer

Opera

Konqueror

Safari

5、Ajax运行机制

1）传统模式下的同步请求

2）Ajax模式下的异步请求

6、Ajax的应用场景

百度地图、谷歌地图

邮箱

判断用户名是否可用

无刷新分页

7、快速入门

例1：通过单击按钮实时返回服务端数据

demo01.html代码

demo01.php服务器端代码

运行效果：

二、创建Ajax对象

1、创建Ajax对象

在使用Ajax的前提下，我们首先要创建Ajax对象，又由于Ajax属于客户端语言，所以Ajax对象也必须进行兼容处理：

IE模型下：

varxhr=newActiveXObject(‘Microsoft.XMLHTTP’);(IE7以下版本，在IE8也支持)

W3C模型下

varxhr=newXMLHttpRequest();（W3C浏览器与IE高版本浏览器）

创建Ajax对象示例代码：

2、封装Ajax对象

第一种方案：通过navigator对象的userAgent来进行判断

但是以上方案不推荐使用，原因：

在IE高版本以上版本中，IE自动移除了ActiveXObject这个对象，所以会导致IE高版本浏览器无法通过ActiveXObject对象进行创建Ajax对象

第二种方案：通过try…catch…方式创建Ajax对象

使用方法：

3、Ajax对象中的常用属性与方法

1）常用方法：

open(method,url)：初始化Ajax对象

method：模拟http的get与post请求，如get请求，’get’;否则则为’post’;

url：要请求的url地址

setRequestHeader(header,value)：设置请求头信息

header：请求头参数

value：设置请求头的值

send(content)：发送Ajax请求