<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX GET 请求</title><style>#result{width:200px;height:100px;border:solid 1px #90b;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>//获取button元素const btn = document.getElementsByTagName('button')[0];const result = document.getElementById("result");//绑定事件btn.onclick = function(){//1. 创建对象const xhr = new XMLHttpRequest();//2. 初始化 设置请求方法和 urlxhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');//3. 发送xhr.send();//4. 事件绑定 处理服务端返回的结果// on  when 当....时候// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4// change  改变xhr.onreadystatechange = function(){//判断 (服务端返回了所有的结果)if(xhr.readyState === 4){//判断响应状态码 200  404  403 401 500// 2xx 成功if(xhr.status >= 200 && xhr.status < 300){//处理结果  行 头 空行 体//响应 // console.log(xhr.status);//状态码// console.log(xhr.statusText);//状态字符串// console.log(xhr.getAllResponseHeaders());//所有响应头// console.log(xhr.response);//响应体//设置 result 的文本result.innerHTML = xhr.response;}else{}}} }</script>
</body>
</html>



AJAX GET的请求相关推荐

  1. js请求结果拦截机器_js利用jquery的jsonp来解决ajax跨域请求被浏览器拦截结果的问题...

    先来个表.页面太多对不起我也不知道这张表是从哪个博客保存过来的,所以无法注明博客地址.非常抱歉.URL说明是否允许通信 http://www.a.com/a.jshttp://www.a.com/b. ...

  2. JSONP实现Ajax跨域请求

    前言 由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...

  3. 用iframe设置代理解决ajax跨域请求问题

    用iframe设置代理解决ajax跨域请求问题 参考文章: (1)用iframe设置代理解决ajax跨域请求问题 (2)https://www.cnblogs.com/ranzige/p/370965 ...

  4. jquery ajax多次请求接口解决方案

    jquery ajax多次请求接口解决方案 参考文章: (1)jquery ajax多次请求接口解决方案 (2)https://www.cnblogs.com/DreamLiFeng/p/100088 ...

  5. Ajax跨域请求,无法传递及接收cookie信息解决方案

    Ajax跨域请求,无法传递及接收cookie信息解决方案 参考文章: (1)Ajax跨域请求,无法传递及接收cookie信息解决方案 (2)https://www.cnblogs.com/yalong ...

  6. Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录认证及退出)解决方案

    Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录认证及退出)解决方案 参考文章: (1)Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录 ...

  7. AJAX跨域请求数据原理与案例

    1.如何通过AJAX跨域请求数据 AJAX通过jsonp来实现跨域请求数据,通过设置dataType(jquery)为jsonp即可. 2.AJAX如何通过jsonp实现跨域(来源于其他网站资料) J ...

  8. [转]掌握Ajax 第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 [IBM]

    转自:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步 ...

  9. jQuery Ajax: $.post请求示例

    jQuery Ajax: $.post请求示例 leyangjun.html页面 <html> <head> <meta http-equiv="Content ...

  10. ajax跨域请求原理,Ajax跨域请求的原理(图文教程)

    这篇文章主要为大家详细介绍了Ajax跨域请求的原理,Ajax怎么样做跨域请求?具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了Ajax跨域请求的具体实现过程,供大家参考,具体内容 ...

最新文章

  1. 微信支付的坑 返回值 -1
  2. z变换公式表_各种钣金折弯极限尺寸计算公式汇总,干货!
  3. php里 like什么意思,php – 是LIKE,但是int表示应该检查的字符串
  4. 转载:使用sklearn进行数据挖掘
  5. python用另一个字段替代本字段的null_Python中的数据库
  6. linux下I2C驱动架构全面分析
  7. 分享一篇SCCM软件更新的故障排除
  8. Java多线程之新类库中的构件DelayQueue
  9. mysql读写分离_SpringBoot+MyBatis+MySQL读写分离
  10. AT24C04、AT24C08、AT24C16系列EEPROM芯片单片机读写驱动程序
  11. vue结合elmentui实现前端分页
  12. 生活在压力下不得不读的好书---《此生未完成》读后感
  13. “大菜汪”1 个就霸屏,手机QQ上线新表情
  14. 【无标题】三星Xpress M2020打印机刷免芯片
  15. SuperSocket实战---使用SuperSocket的FixedHeaderReceiveFilter进行通信
  16. 新闻/媒体 发布接口定制_每日新闻摘要,19/4/14:老大哥在看
  17. 快速提高网站排名工具大全
  18. c语言怎么使用数组播放下一首音乐,【数组编程面试题】面试问题:c语言MP3播… - 看准网...
  19. 祝学校计算机系的新年贺词,新年祝福语:学校新年贺词祝福短信
  20. python求最大公约数

热门文章

  1. 11组软件工程组队项目计划安排及项目介绍——失误招领系统
  2. 【阿里云API】 阿里云API调用的若干说明
  3. Redis的系统级命令
  4. 键盘 Input子系统
  5. 不用加减乘除符号计算两数之和
  6. TypeForwardedTo Attribute ---- 类型传递
  7. 扩展Visual Studio 2010服务器资源管理器中的SharePoint结点
  8. 索尼爱立信M608C使用心得!
  9. Android Studio使用教程
  10. Pat乙级 1038 统计同成绩学生