利用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对象-->配置发送参数-->执行发送-->处理响应

 

一、建立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----------'); 二、配置发送参数     var type = 'get';     var myurl = './data.php';     var async = false;//第三个参数默认值就是true,表示异步；false表示同步     xhr.open(type,myurl,async);  三、发送     var param = null;     xhr.send(param);     readyState==1表示请求已经发出       四、处理响应（指定回调函数）,以下的回调函数不是咱们本身调用，而是由浏览器自动调用      那么浏览器在什么状况下调用？xhr.readyState（0、一、二、三、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.注意事项：

    一、xhr的对象建立须要兼容处理

    二、xhr.open的3个参数的做用

    三、xhr.readyState状态值要了解

    四、经过xhr.responseText获取服务器响应的数据

    五、对于get请求来讲，xhr.send()的参数固定写成null

    六、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);
一、Aja的get提交数据是经过url传递参数，而且须要对参数进行编码处理 二、xhr.send();方法参数固定为null	一、Ajax的post提交方式经过xhr.send(); 函数传递的参数发送数据，而不是经过url传递数据 二、post提交方式必须设置请求头（   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode'); ） 三、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'=>'一个杀伐纷争的年代'), 　　array('name'=>'红楼梦','author'=>'曹雪芹','price'=>'30','desc'=>'封建社会家族的缩影'), 　　array('name'=>'水浒传','author'=>'施耐庵','price'=>'40','desc'=>'一群土匪的故事'), 　　array('name'=>'西游记','author'=>'吴承恩','price'=>'50','desc'=>'四个男人和一匹马的故事')     );       json_encode()方法的做用：把数组转化成json字符串     $str = json_encode($arr);     echo $str;    print_r($arr);//也能够实现    ?>