ajax教程书,AJAX教程

一.get与post的区别：

1.get：

1.>get提交时，将数据显示到url中,安全性较低；

2.>url对于提交的数据大小有限制，一般是几十个汉字，不适合提交大量数据；

2.post：

1.>数据不会显示在url中，安全性较高；

2.>可以发送大量数据，尤其是文件上传必须用post；

二.简介：

1.作用：

在无刷新无提交的情况下，实现页面的局部加载；

2.定义：

AJAX=异步Javascript和XML;

AJAX是一种用于创建快速动态网页的技术；

3.使用AJAX的应用程序案例：

新浪微博，Goole地图，开心网等等；

4.举例：

1-xhr.html:

发送ajax请求

btn.οnclick=function(){

alert(111);

// 1.声明一个xhr对象;

var xhr=new XMLHttpRequest();

// 2.监听xhr状态的改变

xhr.onreadystatechange=function(){

console.log(xhr.readyState+'xhr就绪状态');//=4成功

//4个值 1，2，3，4

console.log(xhr.status+'响应状态');//=200

console.log(xhr.responseText+'响应消息主体');

}

//3.打开web服务器的链接

xhr.open('get','1_xhr.php',true);//true代表是否为异步请求

//4.发送请求消息主体(发送数据)

xhr.send(null);

}

1-xhr.php:

//响应头部

header('Content-Type:text/plain');

for($i=0;$i<=10;$i++){

echo $i.'hello';

}

5.XMLHttpRequest用于在后台与服务器交换数据，这意味着可以在不重新加载整个网页的情况下，对网页的某部分内容进行更新；

6.向服务器发送请求，使用XMLHttpRequest对象的open()和send()方法；

eg：xhr.open('get','1-xhr.php',true);//open方法中的async参数必须设置为true；

xhr.send()；

序号

方法

描述

1

open(method，url，async)

规定请求的类型，url以及是否异步处理请求

method：请求的类型：get或post； url：文件在服务器上的位置；async： true(异步)或false(同步)；

2

send方法 send(string)

将请求发送到服务器，仅用于post请求

7.通过AJAX，Javascript无需等待服务器的响应，而是：

1.>在等待服务器响应时执行其他脚本；

2.>当响应就绪后对响应进行处理；

8.AJAX-服务器响应

若需获得来自服务器的响应，需使用XMLHttpRequest对象的responseText或responseXML；

1.>responseText     获得字符串形式的响应数据；

2.>responseXML    获得xml形式的响应数据；

9.XMLHttpRequest对象的三个重要属性：

属性

描述

onreadystatechange

存储函数，每当readystate属性改变时，就会调用该函数；

readystate

存有XMLHttpRequest的状态，从0-4发生变化；0：请求未初始化；1：服务器连接已建立；2：请求已接收；3：请求处理中；4：请求已完成，且响应已就绪；

status

200“OK”     404 未找到页面

10.常用header汇总：

header(‘Content-type:text/html;charset=utf8’);//设置页面内容是html，编码格式是utf-8；

header (‘Content-type:text/plain’);//纯文本格式；

header (‘Content-type:img/jpeg’);//JPG,JPEG;

header (‘Content-type:application/zip’);//zip文件；

header (‘Content-type:application/pdf’);//pdf文件；

header (‘Content-type:audio/mpeg’);//音频文件；

header (‘Content-type:text/css’);//css文件；

header (‘Content-type:text/javascript’);//js文件；

header (‘Content-type:text/xml’);//xml;

header (‘Content-type:application/x-show**e-flash’);//flash动画；

三.使用get方式发送ajax请求：

发送ajax请求

btn.οnclick=function(){

alert(111);

// 1.声明一个xhr对象;

var xhr=new XMLHttpRequest();

// 2.监听xhr状态的改变

xhr.onreadystatechange=function(){

console.log(xhr.readyState+'xhr就绪状态');//=4成功

//4个值 1，2，3，4

console.log(xhr.status+'响应状态');//=200

console.log(xhr.responseText+'响应消息主体');

}

//3.打开web服务器的链接

xhr.open('get','1_xhr.php',true);//true代表是否为异步请求

//4.发送请求消息主体(发送数据)

xhr.send(null);

}

四.使用post方式发送ajax请求

// 1.创建一个xhr对象

var xhr=new XMLHttpRequest();

// 2.监听xhr状态的改变

xhr.onreadystatechange=function(){

}

// 3.打开一个链接

xhr.open('post','jd.php',true);

// 4.修改请求消息头部

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

// 5.发送数据

xhr.send(null);