JS 原生ajax写法
<script>
//step1.创建XMLHTTPRequest对象,对于低版本的IE,需要换一个ActiveXObject对象
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} //>>step2.使用open方法设置和服务器的交互信息:
//设置请求的url参数,参数一是请求的类型,参数二是请求的url,参数三指定是否使用异步,默认是true
xhr.open("post", "", true);
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //>>step3.发送请求 GET请求不需要参数,POST请求需要把body部分以字符串或者FormData对象传进去。
xhr.send(); //>>step4.注册事件 onreadystatechange 状态改变就会调用
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) { // 成功完成
// 判断响应结果:
if (xhr.status === 200) {
// 成功,通过responseText拿到响应的文本:
console.log(xhr.responseText);
} else {
// 失败,根据响应码判断失败原因:
console.log(xhr.status);
}
} else {
// HTTP请求还在继续...
}
}
</script>
JS 原生ajax写法的更多相关文章
- JS原生ajax
原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- js原生Ajax的封装与使用
一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...
- js原生Ajax 的封装和原理
原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
- JS原生Ajax&Jquery的Ajax技术&Json
1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个 ...
- js原生Ajax(十四)
一.XMLHttpRequest [使用XMLHttpRequest时,必须将html部署到web服务器中]1) 指定请求1.实例化eg: var http = new XMLHttpReque ...
- Jquery学习笔记 --ajax删除用户,使用了js原生ajax
主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 <!DOCTYPE html> 2 <html lang= ...
- [代码]JS原生Ajax,GET和POST
javascript/js的ajax的GET请求: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ ...
- Jquery学习笔记(10)--ajax删除用户,使用了js原生ajax
主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: <!DOCTYPE html> <html lang=&quo ...
随机推荐
- Chrome插件Postman的数据目录存储位置,记一次重装系统后找回postman数据的过程...
有次重装系统到一块新的SSD磁盘,很多数据都做了备份就是忘记将Chrome插件Postman的数据做备份,导致重装后找不到以前定义的那些Collections.悔恨之余想到既然我原来的C盘还在,为何不 ...
- 怎样用 I/O流读取txt文件?
java.io包提供了用来永久保存对象状态的机制,可处理各种类型的流,如文件流.字节流.字符流等,还提供实现可串行化Serializable接口.可处理对象流. Java语言提供3种自动生成的标准流. ...
- Js数据类型、Json格式、Json对象、Json字符串
数据类型,从结构上看,所有的数据最终都可以分成三种类型: 第一种类型是scalar(标量),也就是一个单独的string(字符串)或数字(numbers),比如“北京”这个单独的词. 第二种类型是se ...
- jQurey Validation 1.16
https://jeesite.gitee.io/front/jquery-validation/1.16/demo/index.html
- 飞越面试官(一)--Java基础
大家好!我是本公众号唯一官方指定没头屑的小便--怕屁林. 众所周知,现场面试(包括视频面试)多数时候是没有白板,也就是说,对于你的知识点.项目经验.过往经历和个人介绍等等,都是靠一张嘴.所以考虑到这个 ...
- 介绍web开发中实现会话跟踪的常用技术方法
由于http是无状态的协议,这种特性严重阻碍了客户端与服务器进行动态交互,例如购物车程序,客户在购物车中添加了商品,服务器如何知道购物车已有的物品呢?为了支持客户端与服务器之间的交互,为了弥补http ...
- 第三方 CSS 并不安全
最近一段时间,关于 通过 CSS 创建 “keylogger”(键盘记录器) 的讨论很多. 有些人呼吁浏览器厂商去“修复”它.有些人则深入研究,表示它仅能影响通过类 React 框架建立的网站,并指责 ...
- Win10+YOLOv3完整安装过程(亲测可运行)
最近了解并尝试在Win10安装YOLOv3,参考了十几篇文章,发现每个人都有自己的安装方式,最初尝试用cmake编译,虽然安装完成,但无法使用GPU,坑非常多,经2天努力终于安装成功,分享并记录自己的 ...
- sun.reflect.generics.reflectiveObjects.TypeVariableImpl cannot be cast to java.lang.Class
1.首先,问题出现的点是在泛型 我出现问题的原因是,和泛型有关系,要调整泛型 2.我把问题出现的过程描述一哈子 1.基础类 @tk.mybatis.mapper.annotation.Register ...
- 报错信息ImportError: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by............)
报错信息ImportError: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by............) L ...