利用Ajax实现异步请求
Ajax
1.课程引入
静态网站和动态网站都是同步的，但同步方式有缺点：页面请求响应式阻塞，影响用户体验
为了解决这个问题，可以通过变通的手段实现页面的局部更新（隐藏帧），由于隐藏帧不方便就有了Ajax
2.隐藏帧实现局部更新
<form action="./11inner.php" method="post" target="abc"> 用户名：<input type="text" name="username"> 密 码：<input type="password" name="password"> <input type="submit" value="提交"> </form> <iframe src="" width="200" height="200" frameborder="2" name="abc"></iframe> PHP中的代码 <?php $uname = $_POST[\'username\']; $pw = $_POST[\'password\']; if($uname == \'111\' && $pw == \'111\') { //js中的parent表示父级页面 echo \'<script> parent.document.getElementById("dv").innerHTML = "登录成功" </script>\'; } else { echo \'<script> parent.document.getElementById("dv").innerHTML = "用户名或密码错误" </script>\'; } ?>
3.如何实现Ajax响应请求
基本步骤：创建XMLHttpRequest对象-->配置发送参数-->执行发送-->处理响应
1、创建xhr对象 var xhr = null; if(window.XMLHttpRequest){ 标准浏览器 xhr = new XMLHttpRequest(); }else{ 非标准浏览器IE6/7/8 xhr = new ActiveXObject(\'Microsoft.XMLHTTP\'); } readyState==0表示xhr对象初始化完成 console.log(xhr.readyState + \'---------1----------\'); 2、配置发送参数 var type = \'get\'; var myurl = \'./data.php\'; var async = false;//第三个参数默认值就是true,表示异步；false表示同步 xhr.open(type,myurl,async); 3、发送 var param = null; xhr.send(param); readyState==1表示请求已经发出 4、处理响应（指定回调函数）,如下的回调函数不是我们自己调用，而是由浏览器自动调用 那么浏览器在什么情况下调用？xhr.readyState（0、1、2、3、4）这个状态值发生变化的时候调用 xhr.onreadystatechange = function(){ if(xhr.status == 200){ if(xhr.readyState == 4){ 获取到服务器响应的数据 var result = xhr.responseText; } } } 如果是同步的请求，就没有必要使用回调函数了，直接通过xhr.responseText就可以得到数据 console.log(xhr.responseText);
4.处理响应中的status （xhr.status == 200 ）
xhr.status是http协议的状态码：200成功、404没有找到资源、500服务器报错
5.处理响应中的readyState是状态值（0,1,2,3,4）
readyState==0表示xhr对象初始化完成
readyState==1表示请求已经发出
readyState== 2表示服务器端数据已经完全返回
readyState== 3表示正在解析数据
readyState== 4表示数据解析完成，可以使用了
6.注意事项：
1、xhr的对象创建需要兼容处理
2、xhr.open的3个参数的作用
3、xhr.readyState状态值要了解
4、通过xhr.responseText获取服务器响应的数据
5、对于get请求来说，xhr.send()的参数固定写成null
6、xhr.status和xhr.readyState的作用和区别
7.阻止表单提交的几种方式
1.return false;
2.e.preventDefault();
3. <input type="submit" value="提交" id="btn">把“submit”换成“button”
8.手动提交表单
form.submit();
9.Ajax-get提交
Aja的get提交数据是通过url传递参数，并且需要对参数进行编码处理
xhr.send();方法参数固定为null
2.配置发送函数
encodeURI作用对get参数进行编码处理，防止乱码
var param = encodeURI(\'?username=\'+uname+\'&password=\'+pw);
xhr.open(\'get\',\'./data.php\'+param);
3.发送
xhr.send(null);
10.Ajax-post提交
Ajax的post提交方式通过xhr.send();
函数传递的参数发送数据，而不是通过url传递数据
post提交方式必须设置请求头
post提交的数据不需要进行编码处理
2.配置发送函数
xhr.open(\'post\',\'./33data.php\');
//设置请求头信息(对于post提交必须设置请求头)
xhr.setRequestHeader(\'Content-Type\',\'application/x-www-form-urlencode\');
3.发送
var param = \'username=\'+uname+\'&password=\'+pw;
xhr.send(param);
11.post和get的区别
| get | post |
|
2.配置发送函数
encodeURI作用对get参数进行编码处理，防止乱码
var param = encodeURI(\'?username=\'+uname+\'&password=\'+pw);
xhr.open(\'get\',\'./data.php\'+param);
3.发送
xhr.send(null);
|
2.配置发送函数
xhr.open(\'post\',\'./33data.php\');
设置请求头信息(对于post提交必须设置请求头)
xhr.setRequestHeader(\'Content-Type\',\'application/x-www-form-urlencoded\');
3.发送
var param = \'username=\'+uname+\'&password=\'+pw;
xhr.send(param);
|
|
1、Aja的get提交数据是通过url传递参数，并且需要对参数进行编码处理
2、xhr.send();方法参数固定为null
|
1、Ajax的post提交方式通过xhr.send();
函数传递的参数发送数据，而不是通过url传递数据
2、post提交方式必须设置请求头（ xhr.setRequestHeader(\'Content-Type\',\'application/x-www-form-urlencode\'); ）
3、post提交的数据不需要进行编码处理
|
12.url的标准格式
| http://www.baidu.com/a/ac/b?flag=123#abc | scheme://host:port/path?query#fragment |
| http----scheme | scheme:通讯协议 http https ftp |
| www.baidu.com---host | host:域名或IP地址 |
| 隐藏的 http的默认端口是80---port | port：端口 浏览器是隐藏的 |
| a/ac/b---path | path:路径，端口到问号之间的部分 |
| #后面的abc----fragment | fragment:锚点 hash（哈希）,作用：定位页面中的某一确定位置 |
13.encodeURICompontent()和encodeURI()
encodeURIComponent()方法可以对url中的特殊字符进行编码
encodeURI()方法不会转换特殊字符
|
var url = \'http://www.sina.com\';
var str = \'http://www.baidu.com?username=张三&flag=\'+encodeURIComponent(\'://??:\');
console.log(encodeURI(str));
console.log(encodeURIComponent(str));
|
14.解析服务器服务器返回的xml形式的数据 var result = xhr.responseXML;
15.解析服务器服务器返回的json形式的数据 var result = xhr.responseText;
14&15
|
解析服务器服务器返回的xml形式的数据
var result = xhr.responseXML;
|
解析服务器服务器返回的json形式的数据
var result = xhr.responseText;
|
|
xml数据格式的缺点：
1.元数据（描述数据的数据）：元数据占用的空间较多，不利于网络传输
2.不方便解析
|
json数据格式
1.数据由键值对组成
2.键和值必须用双引号引起来
3.值得类型可以是：数值 字符串 数组 对象
|
|
json_encode();方法的作用：把数组转化成json字符串
$str = json_encode($arr);
JSON.parse();作用：把字符串转成对象
var str = \'{"username":"lisi","age":"12"}\';
var obj = JSON.parse(str);
var obj = eval(\'(\'+str+\')\');//也可以实现
eval方法的作用就是把符合js语法 的字符串转成代码并执行
eval(\'console.log(111)\');//输出111
|
|
|
if(xhr.status == 200 && xhr.readyState == 4){
xml数据格式
var ret = xhr.responseXML;
var books = ret.getElementsByTagName(\'book\');
var tag = \'\';
for (var i = 0; i < books.length; i++) {
var book = books[i];
var name = book.getElementsByTagName(\'name\')[0].innerHTML;
var author = book.getElementsByTagName(\'author\')[0].innerHTML;
var price = book.getElementsByTagName(\'price\')[0].innerHTML;
var desc = book.getElementsByTagName(\'desc\')[0].innerHTML;
tag += \'<ul><li>\'+name+\'</li><li>\'+author+\'</li><li>\'+price+\'</li><li>\'+desc+\'</li></ul>\';
}
var container = document.getElementById(\'container\');
container.innerHTML = tag;
}
|
if(xhr.status == 200 && xhr.readyState == 4){
// 原生Ajax从服务器获取的原始数据是字符串（有可能是json格式的字符串）
var result = xhr.responseText;
// JSON.parse()的作用就是把json形式的字符串转化成对象
result = JSON.parse(result);
console.log(result);
var tag = \'\';
for (var i = 0; i < result.length; i++) {
var book = result[i];
tag += \'<ul><li>\'+book.name+\'</li><li>\'+book.author+\'</li><li>\'+book.price+\'</li><li>\'+book.desc+\'</li></ul>\'
}
var container = document.getElementById(\'container\');
container.innerHTML = tag;
}
|
|
<?php
header(\'Content-Type:application/xml; charset=utf-8\');
?>
<?xml version=\'1.0\' encoding=\'utf-8\' ?>
<booklist>
<book>
<name>三国演义</name>
<author>罗贯中</author>
<price>20</price>
<desc>一个杀伐纷争的年代</desc>
</book>
</booklist>
|
<?php
$arr = array(
array(\'name\'=>\'三国演义\',\'author\'=>\'罗贯中\',\'price\'=>\'20\',\'desc\'=>\'一个杀伐纷争的年代\'), );
json_encode()方法的作用：把数组转化成json字符串
$str = json_encode($arr);
echo $str;
print_r($arr);//也可以实现
?>
|