博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【JavaScript】——原生Ajax
阅读量:7102 次
发布时间:2019-06-28

本文共 1654 字,大约阅读时间需要 5 分钟。

编写原生Ajax的过程,和打电话的过程有点类似。我们可以类比一下。

打电话的过程:

  1. 拥有一个电话;
  2. 拨号;
  3. 自己说;
  4. 听别人说。

原生Ajax的过程:

  1. 创建Ajax对象(XMLHttpRequest);
  2. 连接服务器(open);
  3. 发送请求(send);
  4. 接受返回值(onreadystatechange)。
function ajax(url, fnSucc, fnFiled){    if(window.XMLHttpRequest){  //1.用没有定义的变量(如:a),报错;2.用没有定义的属性(如:window.a),undefined        var oAjax = new XMLHttpRequest();   //非IE6    }else{        var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); //IE6    }    //连接服务器    //open(方式,url, 异步传输)    oAjax.open('get', url, true);    //发送请求    oAjax.send();    //接受请求    //当网络状态改变的时候    oAjax.onreadystatechange = function(){  //每当 readyState 改变时,就会触发 onreadystatechange 事件        if(oAjax.readyState==4){    // readyState 状态值:网络状态,浏览器和服务器进行到哪一步了            if(oAjax.status==200){  //状态码:http状态,说到404就知道了                fnSucc(oAjax.responseText);            }else{                if(fnFiled){                    fnFiled(oAjax.status);                }            }        }    }}

readyState状态值:

0 (未初始化)还没有调用open方法

1 (载入)以调用send方法,正在发送请求
2 (载入完成)send方法完成,已收到全部响应内容
3 (解析)正在解析响应内容
4 (完成)响应内容解析完成,可以在客户端调用了

 

http状态码:

2xx (成功)表示成功处理了请求的状态代码

  • 200 (成功) 服务器已成功处理了请求。

3xx (重定向) 表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。

  • 304 (未修改) 自从上次请求后,请求的网页未修改过。 服务器返回此响应时,不会返回网页内容。

4xx(请求错误) 这些状态代码表示请求可能出错,妨碍了服务器的处理

  • 400 (错误请求) 服务器不理解请求的语法。
  • 403 (禁止) 服务器拒绝请求。
  • 404 (未找到) 服务器找不到请求的网页。

5xx(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误,而不是请求出错

  • 500 (服务器内部错误) 服务器遇到错误,无法完成请求。
  • 501 (尚未实施) 服务器不具备完成请求的功能。 例如,服务器无法识别请求方法时可能会返回此代码。
  • 502 (错误网关) 服务器作为网关或代理,从上游服务器收到无效响应。
  • 503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常,这只是暂时状态。
  • 504 (网关超时) 服务器作为网关或代理,但是没有及时从上游服务器收到请求。
  • 505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。

 

 

 

 

 

 

转载于:https://www.cnblogs.com/sanyi2019/p/10364085.html

你可能感兴趣的文章
常用Web Service汇总(天气预报、时刻表等)
查看>>
resin app server安装总结
查看>>
抓取新浪新闻列表实例
查看>>
[04-06]鼠标悬停图片时,实现抖动效果
查看>>
抽象类和接口的区别
查看>>
react 自定义 TabBar 组件
查看>>
Palindrome Pairs
查看>>
项目测试随笔
查看>>
poj3261 -- Milk Patterns
查看>>
HttpClient获取返回类型为JSON或XML的数据
查看>>
python 自动化对比返回结果
查看>>
SQLite分页语句
查看>>
cesiumjs开发实践(六) CZML
查看>>
Delphi窗体中禁用最大化按钮
查看>>
K均值
查看>>
基于FPGA的dds发生器与lcd显示参数
查看>>
HDU-6216 A Cubic number and A Cubic Number [二分]
查看>>
php单例模式的使用场景,使用方法
查看>>
fetch请求get方式以及post提交参数为formdata类型的数据
查看>>
[学习笔记]凸优化/WQS二分/带权二分
查看>>