(转)原生ajax的写法
1.创建XMLHttpRequest对象
function createXMLHTTPRequest() {
//1.创建XMLHttpRequest对象
//这是XMLHttpReuquest对象无部使用中最复杂的一步
//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
var xmlHttpRequest;
if (window.XMLHttpRequest) {
//针对FireFox,Mozillar,Opera,Safari,IE7,IE8
xmlHttpRequest = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if (xmlHttpRequest.overrideMimeType) {
xmlHttpRequest.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//针对IE6,IE5.5,IE5
//两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中
//排在前面的版本较新
var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
for ( var i = 0; i < activexName.length; i++) {
try {
//取出一个控件名进行创建,如果创建成功就终止循环
//如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建
xmlHttpRequest = new ActiveXObject(activexName[i]);
if(xmlHttpRequest){
break;
}
} catch (e) {
}
}
}
return xmlHttpRequest;
}
2.get请求
function get(){
var req = createXMLHTTPRequest();
if(req){
req.open("GET", "http://test.com/?keywords=手机", true);
req.onreadystatechange = function(){
if(req.readyState == 4){
if(req.status == 200){
alert("success");
}else{
alert("error");
}
}
}
req.send(null);
}
}
3.post请求
function post(){
var req = createXMLHTTPRequest();
if(req){
req.open("POST", "http://test.com/", true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;");
req.send("keywords=手机");
req.onreadystatechange = function(){
if(req.readyState == 4){
if(req.status == 200){
alert("success");
}else{
alert("error");
}
}
}
}
}
post请求需要设置请求头
4. readyState与status:
readyState有五种状态:
0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法;
1 (载入):已经调用open() 方法,但尚未发送请求;
2 (载入完成): 请求已经发送完成;
3 (交互):可以接收到部分响应数据;
4 (完成):已经接收到了全部数据,并且连接已经关闭。
如此一来,你应该就能明白readyState的功能,而status实际是一种辅状态判断,只是status更多是服务器方的状态判断。关于status,由于它的状态有几十种,我只列出平时常用的几种:
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——成功
201——提示知道新文件的URL
300——请求的资源可在多处得到
301——删除请求数据
404——没有发现文件、查询或URl
500——服务器产生内部错误
(转)原生ajax的写法的更多相关文章
- ASP.NET学习笔记(5)——原生Ajax基本操作
说明(2017-11-4 15:32:49): 1. 回北京后又快一个月了,上次在家写的下回预告,到底是没把加水印写完,而且这次也不想写.. 2. 上次许的愿,十月份看完asp.net,已经泡汤了,翻 ...
- 原生ajax与封装的ajax使用方法
当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
- jquery ajax分页写法
jquery ajax分页写法我用的是laypage插件 前端代码<pre> function demo(curr) { $.getJSON('/home/index/getinfo', ...
- 原生Ajax
使用原生Ajax 验证用户名是否被注册 创建出注册信息: <h1>注册信息</h1><input type="text" name="txt ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- 原生Ajax 和Jq Ajax
前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...
- 手写原生ajax
关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...
- 浅谈AJAX的基本原理和原生AJAX的基础用法
一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...
- python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,
python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...
随机推荐
- 《Andrew Ng深度学习》笔记2
神经网络基础 1.图计算 计算时有两种方法:正向传播和反向传播.正向传播是从底层到顶层的计算过程,逐步推出所求公式.反向传播是从顶层到底层,从已知的式子求出因变量的影响关系. 在这里用到的反向传播算法 ...
- Opencv博文收藏列表
opencv识别二维码:https://blog.csdn.net/jia20003/article/details/77348170 opencv视频:http://www.opencv.org.c ...
- c#几种数据库的大数据批量插入(SqlServer、Oracle、SQLite和MySql)
这篇文章主要介绍了c#几种数据库的大数据批量插入(SqlServer.Oracle.SQLite和MySql),需要的朋友可以了解一下. 在之前只知道SqlServer支持数据批量插入,殊不知道Ora ...
- tornado 01 路由、输入与输出
tornado 01 路由.输入与输出 一.安装tornado pyvip@Vip:~$ workon py3env #安装python3的虚拟环境 (py3env) pyvip@Vip:~$ pip ...
- 【算法笔记】B1043 输出PATest
1043 输出PATest (20 分) 给定一个长度不超过 104 的.仅由英文字母构成的字符串.请将字符重新调整顺序,按 PATestPATest.... 这样的顺序输出,并忽略其它字符.当 ...
- 洛谷 P3239 [HNOI2015]亚瑟王(期望dp)
题面 luogu 题解 一道复杂的期望\(dp\) 思路来源:__stdcall 容易想到,只要把每张牌打出的概率算出来就可以求出\(ans\) 设\(fp[i]\)表示把第\(i\)张牌打出来的概率 ...
- bzoj 1189 二分+最大流
题目传送门 思路: 先预处理出每个人到每扇门的时间,用门作为起点进行bfs处理. 然后二分时间,假设时间为x,将每扇门拆成1到x,x个时间点,表示这扇门有几个时间点是可以出去的.对于一扇门,每个时间点 ...
- bzoj1076 奖励关 期望dp
题目传送门 题目大意:总共有k次弹出宝物的机会,宝物共有n种,弹出不同的宝物的概率相同的,是每个宝物都有价值,和选择这个宝物的限制(必须具有特定的宝物),问最后的最优期望是多少. 思路:“正向推概率, ...
- vue2.0小小记录
1.关于路由跳转方法:push this.$router.push({name:'master',params:{id:'参数'}}); //name和params搭配,刷新的话,参数会消失 this ...
- [转] Node.js的线程和进程
[From] http://www.admin10000.com/document/4196.html 前言 很多Node.js初学者都会有这样的疑惑,Node.js到底是单线程的还是多线程的?通过本 ...