美文网首页
原生ajax

原生ajax

作者: strugglexiang | 来源:发表于2018-06-28 16:24 被阅读0次

目录


1-get方法提交

  1. 状态值
        0 (未初始化)对象已建立,但是尚未初始化(尚未调用open方法)
        1(初始化)已调用send()方法,正在发送请求
        2(发送数据)send()方法调用完成,但是当前的状态及http头未知
        3(数据传送中)已接收部分数据,因为相应及http头不全,这时通过responseText获取部分数据会出现错误
        4(完成)数据接收完成,此时可以通过responseText获取完整的数据
  1. json转换
JSON.parse()     字符串转对象
JSON.stringify() 对象转字符串
  1. get写法
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () = {
    if(xhr.readyState === 200 && xhr.status === 200){
        console.log(xhr.responseText)
    }//readyState 准备状态   status 请求状态
}
xhr.open('GET', 'http://localhost:3000/get?x=1', true)
xhr.send()


open() 这个方法有三个参数,open("提交方式 get/post","资源的地址",异步或者同步 true/false);

2-post方法提交

const xhr = new XMLHttpRequest()
const data = {
    name:'xiaopan',
    age:'22'
}
xhr.onreadystatechange = () => {
    if(xhr.readyState === 4 && xhr.status === 200){
        console.log(JSON.parse(xhr.responseText))
    }
}
xhr.open('post', 'http://localhost:3000/post', true)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencouded')
xhr.send(`username=${data.name}&age=${data.age}`)

相关文章

  • 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/hxtnyftx.html