美文网首页
原生AJAX

原生AJAX

作者: 让代码飞会儿 | 来源:发表于2019-12-04 08:19 被阅读0次
  • 创建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);

相关文章

  • Ajax

    标签: Ajax 正文 一、实现一个原生Ajax 二、Ajax状态 三、将原生的 ajax 封装成 promise

  • js和jq的ajax调用

    原生ajax jQuery的ajax

  • html5的ajax学习(三)

    一.原生的ajax封装 原生的ajax的调用 二.jquery的ajax 2.1 jquery的语法 三. fun...

  • 原生ajax和jquery中的ajax

    原生的ajax请求方法: jquery中的ajax:

  • ajax

    原生ajax配置详解 对ajax简单封装 调用

  • Ajax Axios

    关于Ajax兼容性问题 前端原生Ajax(get方式),后端使用node.js 前后端代码: 前端原生Ajax(p...

  • ajax封装

    原生ajax封装

  • AJAX

    主要内容: ajax 是什么、原生ajax 写法和jQuery ajax写法。 AJAX 是什么 ajax,即As...

  • [转]JS原生Ajax代码示例

    文章来源: JS原生Ajax和jQuery的Ajax与代码示例 -- 苏凯勇往直前 JS原生的Ajax其实就是围绕...

  • ajax总结

    1. Ajax 1.1 原生JavaScript封装Ajax 1.2 jquery ajax 及其 快捷方法 $....

网友评论

      本文标题:原生AJAX

      本文链接:https://www.haomeiwen.com/subject/srohgctx.html