ajax原理 封装步骤与思路

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 服务器反馈的内容
 } } }