原生ajax

目录


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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,986评论 19 139
  • 没有学Ajax之前,就在想这到底是一门什么技术,问自己什么是Ajax?Ajax有哪些重点概念?Ajax如何运用?听...
    张延伟阅读 2,053评论 0 8
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,018评论 3 119
  • 1、透彻理解自己的产品。我们的马达一共有多少种性能,能实现什么样的功能,决定了有多大的市场,绝不是仅仅局限于现在挖...
    翩跹少年阅读 1,051评论 2 0
  • 2017年9月7日 星期四 今天晚上看《80天环游地球》第九章,路路通惹麻烦。 主仆二人在孟买下了船,顺...
    鑫隆妈妈阅读 156评论 0 0