首页 > Web开发 > 详细

ajax原理 封装步骤与思路

时间:2019-08-09 14:42:46      阅读:113      评论:0      收藏:0      [点我收藏+]
ajax 全名
Asynchronous Javascript and HML(被称为异步的Javascript 和 HML)



ajax特点
网页某部分的局部刷新

 

ajax 工作原理
view--中间层(ajax引擎) --服务器

 

**ajax 核心
一:XHMHttpRequest 对象(方法, 属性)
     1.0:open("method", "url", "async")
          method: 请求方式
          url: 请求地址
           async: 是否异步
      1.1:send(content) 向服务器发送请求
 
                                   常用的属性
                                   向服务器请求状态的阶段
                                   onreadystatechange 请求状态改变的触发器
 
 
readyState(请求状态)
0 未初始化
1 正在加载
2 已加载
3 交互中
4 完成



服务器反馈的阶段
status(反馈阶段状态)
如 status = 200( 成功)
 
服务器反馈的内容
responsetText

 

状态码:
200 - 请求成功
301 - 资源( 网页等) 被永久转移到其它URL
404 - 请求的资源( 网页等) 不存在
500 - 内部服务器错误
 
 
//代码演示

    var xhr = XHMHttpRequest() //创建 ajax的核心 XHMHttpRequest()对象(实例化)
    xhr.open() /*使用XHMHttpRequest()实例对象的方法 
                              open(open("method", "url", "async"))
                              method: 请求方式(get、post)
                              url: 请求地址 
                              async: 是否异步(true、false)
                              */
    xhr.send() //向服务器发送请求
    xhr.onreadystatechange = function () { //  onreadystatechange 请求状态改变的触发器
        if (readyState == 4) {     // 判断    readyState 服务器的请求状态   是否成功 (4代表成功)  
            if (status == 200) {  //判断   status 服务器和反馈阶段 是否成功  (200代表成功)
                console.log(xhr.responsetText)//responsetText 服务器反馈的内容
            }
        }
    }tatechange 请求状态改变的触发器

 


ajax原理 封装步骤与思路

原文:https://www.cnblogs.com/x-xwp/p/11326984.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!