js Ajax总结

最新推荐文章于 2022-07-13 15:57:51 发布

M'r白墙

最新推荐文章于 2022-07-13 15:57:51 发布

阅读量106

点赞数 1

分类专栏： js基础总结

本文链接：https://blog.csdn.net/baiqiangdoudou/article/details/89915204

版权

js基础总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、什么是服务器

网页浏览过程分析
如何配置自己的服务器程序（AMP）

二、什么是Ajax

无刷新数据读取
用户注册、在线聊天室
异步、同步

三、使用Ajax

基础：请求并显示静态TXT文件
字符集编码
缓存、阻止缓存
动态数据：请求JS（或json）文件
eval的使用
DOM创建元素
局部刷新：请求并显示部分网页文件

四、Ajax原理

HTTP请求方法
GET——用于获取数据（如：浏览帖子）
POST——用于上传数据（如：用户注册）
GET、POST的区别
get是在url里传数据：安全性、容量
缓存

五、创建Ajax对象

1、ActiveXObject(“Microsoft.XMLHTTP”)
XMLHttpRequest()

2、连接服务器
open(方法, 文件名, 异步传输)
同步和异步

3、发送请求
send()

4、请求状态监控
onreadystatechange事件

5、readyState属性：请求状态
0 （未初始化）还没有调用open()方法
1 （载入）已调用send()方法，正在发送请求
2 （载入完成）send()方法完成，已收到全部响应内容
3 （解析）正在解析响应内容
4 （完成）响应内容解析完成，可以在客户端调用了

6、status属性：请求结果
7、responseText

六、Ajax封装

// 封装ajax
function ajax(mode, url, boolean, fnSucc, fnFaild){
       // 创建Ajax对象
      if(window.XMLHttpRequest){
         var oAjax = new XMLHttpRequest();
      } else {
         var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
      }

    // 2、连接服务器
    oAjax.open(mode, url, boolean);

    // 3、发送请求
    oAjax.send();
   
    // 4、接受返回数据
    oAjax.onreadystatechange = function(){

        if(oAjax.readyState == 4){   // 浏览器和服务器交互的状态

            if(oAjax.status == 200){  // 请求成功状态

                fnSucc(oAjax.responseText);  // 请求成功数据

            } else {

                if(fnFaild){     // 请求失败的时候

                   fnFaild(oAjax.status)

                }
            }
        }
    }
}

*************************************************

// 使用ajax
<body>
    <button id="btn">点击请求</button>
     <ul id="ul">

     </ul>
     <script src="./new_ajax.js"></script>
    <script>
        var oBtn = document.getElementById("btn");
        var oUl = document.getElementById("ul");

        oBtn.onclick = function(){
          ajax("GET","data.txt",true,function(data){
              var data = eval(data)
              for(var i = 0;i<data.length;i++){
                  var oLi = document.createElement("li");
                  oLi.innerHTML = '<span>' +data[i].id +'</span><span>'+data[i].name+'</span>'
                  oUl.appendChild(oLi)
              }
          },function(err){
              console.log(err)
          })
        }
    </script>
</body>

M'r白墙

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js Ajax总结

一、什么是服务器网页浏览过程分析如何配置自己的服务器程序（AMP）二、什么是Ajax无刷新数据读取用户注册、在线聊天室异步、同步三、使用Ajax基础：请求并显示静态TXT文件字符集编码缓存、阻止缓存动态数据：请求JS（或json）文件eval的使用DOM创建元素局部刷新：请求并显示部分网页文件四、Ajax原理HTTP请求方法GET——用于获取数据（如：浏览帖子）...
复制链接

扫一扫