Ajax的封装03

一、Ajax

  1.原理：基于http协议的
    内置对象：XMLHttpRequest 发起请求 那会相应
    步骤：
  1. var xhr=new XMLHttpRequest();
  2. // 请求行 请求方式 请求地址 xhr.open(请求方式,请求地址)
  3. xhr.open("post",'01.php');
  4. // console.log(xhr);
  5. // 请求头 在post提交方式下必须写，get则不写
  6. xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  7. // 请求正文
  8. xhr.send('name=itcast&age=10');
  9. // 监听状态变化
  10. xhr.onreadystatechange=function(){
  11. //如果接受到4，就代表完成了
  12. if(xhr.readyState==4){
  13. // console.log(xhr.responseText);
  14. document.querySelector('p').innerText=xhr.responseText;

二、Ajax的其他的API

       xhr.open() 发起请求，可以是get、post方式

xhr.setRequestHeader() 设置请求头

xhr.send() 发送请求主体get方式使用xhr.send(null)

xhr.onreadystatechange = function () {} 监听响应状态

xhr.readyState = 0时，UNSENT open尚未调用

xhr.readyState = 1时，OPENED open已调用

xhr.readyState = 2时，HEADERS_RECEIVED 接收到头信息

xhr.readyState = 3时，LOADING 接收到响应主体

xhr.readyState = 4时，DONE 响应完成 失败否不知道

不用记忆状态，只需要了解有状态变化这个概念

xhr.status表示响应码，如200表示响应成功（只读）

xhr.statusText表示响应信息，如OK

xhr.getAllResponseHeaders() 获取全部响应头信息

xhr.getResponseHeader('key') 获取指定头信息

xhr.responseText、xhr.responseXML都表示响应主体

三、XML标记语言

  1.语法规则：

       1、必须有一个根元素

2、不可有空格、不可以数字或.开头、大小写敏感

3、不可交叉嵌套

4、属性双引号（浏览器自动修正成双引号了）

5、特殊符号要使用实体

6、注释和HTML一样

虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大，所以实现开发已经很少使用了。

  2.使用Ajax请求XML数据

         1.通过XML存储数据的特点
             储存信息量太小，文件本身很大
             取数据比较麻烦
             应用不大常见
 
 

四、JSON

即 JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。

1.语法规则

1、数据在名称/值对中

2、数据由逗号分隔(最后一个健/值对不能带逗号)

3、花括号保存对象方括号保存数组

4、使用双引号

2.JSON解析

JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取

1、Javascript 解析方法

eavl()在其中执行js代码

JSON对象转换:1.JSON.parse(); 这里是把json转换成obj

        2.JSON.stringify()；这里是把obj转换成json

JSON兼容处理json2.js

2、PHP解析方法

json_encode();把关联数组转换成JSON

json_decode();把关联数组转换成对象

总结：JSON体积小、解析方便且高效，在实际开发成为首选。

 

  1. js对象和php对象的区别：
  2. js对象 var obj={key:value};
  3. php对象 是传统的对象
  4. 1.声明类
  5. 2.实例化对象
  6. 3.赋值
  7. class person{
  8. public $name,
  9. public $age;
  10. }
  11. $Person=new person();
  12. echo $Person->name="tom";
 

3.兼容性

IE5、IE6中使用 ActiveObject("Microsoft.XMLHTTP")

如下图

 

关于IE的兼容方面，了解即可。

1.3 封装AJAX工具函数

为了提升我们的开发效率，我们自已将XMLHttpRequest封装成一个函数。

JS代码：

  1. var $={
  2. params:function(arg){
  3. // key=value&key=value
  4. var o='';
  5. for(var k in arg){
  6. o+=k+'='+arg[k]+'&';
  7. // key=value&key=value&
  8. }
  9. // slice(起始点，切除点)
  10. o=o.slice(0,-1);
  11. // key=value&key=value
  12. return o;
  13. },
  14. ajax:function(options){
  15. var type=options.type||'get';
  16. var url=options.url||'';
  17. // key=value&key=value 传入对象
  18. // 把对象编程符合key=value&key=value的形式
  19. var data=this.params(options.data||{});
  20. var success=options.success;
  21. var xhr=newXMLHttpRequest;
  22. // 请求行
  23. if(type=='get'){
  24. // www.study.com?name=itcast&age=10
  25. url=url+'?'+data;
  26. data=null;
  27. }
  28. xhr.open(type,url);
  29. // 请求头
  30. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  31. // 请求正文
  32. xhr.send(data);
  33. // 监听并处理响应
  34. xhr.onreadystatechange=function(){
  35. if(xhr.readyState==4&&xhr.status==200){
  36. var result=xhr.responseText;
  37. success(result);
  38. }
  39. }
  40. }
  41. }
HTML代码
  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. <scriptsrc="tools-2.js"></script>
  9. <script>
  10. var user={
  11. name:'杰克',
  12. age:18
  13. }
  14. $.ajax({
  15. type:'post',
  16. url:'tools.php',
  17. data:user,
  18. success:function(result){
  19. console.log(result);
  20. }
  21. })
  22. // $.ajax({
  23. // type:'get',
  24. // url:'tools.php',
  25. // data:null;
  26. // success:function(){
  28. // }
  29. // })
  30. </script>
  31. </body>
  32. </html>
PHP代码
  1. <?php
  2. echo "hello world"
  3. ?>
 

1.4 jQuery中的Ajax

jQuery为我们提供了更强大的Ajax封装

$.ajax({}) 可配置方式发起Ajax请求

$.get() 以GET方式发起Ajax请求

$.post() 以POST方式发起Ajax请求

$('form').serialize() 序列化表单（即格式化key=val&key=val）

url 接口地址

type 请求方式

timeout 请求超时

dataType 服务器返回格式

data 发送请求数据

beforeSend: function () {} 请求发起前调用 

success 成功响应后调用

error 错误响应时调用

complete 响应完成时调用（包括成功和失败）

读取json文件的数据：

 代码举例：
  HTML代码：
  1. <!DOCTYPE html>
  2. <htmllang="en">
  4. <head>
  5. <metacharset="UTF-8">
  6. <title>Document</title>
  8. <style>
  9. table {
  10. width:800px;
  11. border-collapse: collapse;
  12. }
  14. td {
  15. height:40px;
  16. text-align: center;
  17. border:1px solid #CCC;
  18. }
  19. </style>
  21. </head>
  23. <body>
  24. <table>
  25. <!--<tr>
  26. <td>王力宏</td>
  27. <td>39</td>
  28. <td>男</td>
  29. </tr>-->
  31. </table>
  32. <scriptsrc="js/jquery.min.js"></script>
  33. <script>
  34. $.ajax({
  35. type:'post',
  36. url:'stars.php',
  37. data:null,
  38. success:function(data){
  39. var obj=JSON.parse(data);
  40. console.log(obj);
  41. var html='';
  42. for(var k in obj){
  43. // console.log(obj[k]);
  44. // 拼接字符串
  45. html+='<tr>'+
  46. '<td>'+obj[k].name+'</td>'+
  47. '<td>'+obj[k].photo+'</td>'+
  48. '<td>'+obj[k].ablum+'</td>'+
  49. '<td>'+obj[k].age+'</td>'+
  50. '<td>'+obj[k].sex+'</td>'+
  51. '</tr>';
  52. }
  53. document.querySelector('table').innerHTML+=html;
  54. }
  55. })
  56. </script>
  57. </body>
  59. </html>
JSON代码
  
  1. [
  2. {
  3. "name":"王力宏",
  4. "photo":"./images/wlh.jpg",
  5. "ablum":"<<改变自已>>",
  6. "age":39,
  7. "sex":"男"
  8. },
  9. {
  10. "name":"王力宏",
  11. "photo":"./images/wlh.jpg",
  12. "ablum":"<<改变自已>>",
  13. "age":39,
  14. "sex":"男"
  15. },
  16. {
  17. "name":"王力宏",
  18. "photo":"./images/wlh.jpg",
  19. "ablum":"<<改变自已>>",
  20. "age":39,
  21. "sex":"男"
  22. },
  23. {
  24. "name":"王力宏",
  25. "photo":"./images/wlh.jpg",
  26. "ablum":"<<改变自已>>",
  27. "age":39,
  28. "sex":"男"
  29. }
  30. ]
PHP代码
  1. <?php
  2. $json=file_get_contents('stars.json');
  3. echo $json;
  5. ?>
 
           
 





【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/litao666/p/6070403.html