原生AJAX

  • 创建AJXA
     var xml = new XMLHttpRequest;
     xml.open('get',"/data.txt",false);
    xhr.onreadystatechange=function(){
     if(xhr.readystate===4 && /^2\d{2}$/.test(xhr.status)){
         var val = xhr.responseText;
     }
  };
  xhr.send();

第一步创建Ajax对象

var xml = new XMLHttpRequest;

第二部发送前基本配置信息

xml.open('get',"/data.txt",false,[username],[userpass]);
1.配置请求方式(GET、PUST、PUT、DELETE、HEAD...)
2.打开一个URL地址(配置向那个服务器地址发送请求)
3.同步还是异步 true 异步 false 同步
4.[username],[userpass]向服务器提供请求用户名和请求密码 一般不写
只有服务器做了安全限制只允许特定用户访问的话,我们才传递过去

给onreadystatechange 这个事件绑定一个方法,监听状态改变(只要状态发生改变就会触发方法执行)

xhr.onreadystatechange=function(){
    if(xhr.readystate===4 && /^2\d{2}$/.test(xhr.status)){
        var val = xhr.responseText;
    }

xhr.readyState 有五个值 表示当前AJAX处理的进度 xhr.status(网络状态码)2 OR ^2 \d (2开头或者200)

state 301-> 永久重定向/永久转义 http://www.360buy.com/ -> 京东
302->临时重定向/临时转义 服务器负载均衡
304->本次获取内容是读取缓存中的数据
400 -> 客户端传递给服务器端的参数出现错误
401-> 无权限访问
404 -> 客户端访问地址不存在
500-> 未知服务器错误
503-> 服务器已经超负荷 没做负载均衡状态码就是501

  • 0 UNSENT当前请求还没有发送
  • 1 OPENED URL地址已经打开(发送前的参数配置已经完成)
  • 2 HEADERS_RECEIVED 响应头信息已经接受
  • 3 LOADING: 主要返回非内容正在服务端进行处理
  • 4 DONE 响应主题的内容已经成功返回客户端

发送请求 参数是请求主体传递给服务器内容
xhr.send(null);

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容