• 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. ?>
     
               
     
  • 相关阅读:
    eureka的fetch-registry属性解释
    数据结构设计
    typescript let和const区别
    JDK8新特性
    Synchronized的内存可见性
    java实现打印功能
    idea单元测试jpa注入失败问题----来自Spring Cloud微服务实战-idea版的 廖师兄的product
    eclipse快速生成接口
    读取 Excel 之 Epplus
    [转][Dapper]参数化查询慢
  • 原文地址：https://www.cnblogs.com/litao666/p/6070403.html
Copyright © 2020-2023  润新知