原生js ajax与jquery ajax的区别
原生js ajax的调用:
ajax({
type : "get",
url : "02_ajax_get.txt",
data : {
"userName" : "lnj",
"userPwd" : "321"
},
timeout : time, //超时时间
success : function (xmlhttp) {
alert(xmlhttp.responseText);
},
error : function (xmlhttp) {
alert('请求失败!');
}
});
jquery ajax的调用:
$.ajax({
type : "get",
url : "02_ajax_get.txt",
data : "userName=lnj&userPwd=321",
timeout : time, //超时时间
success : function (xmlhttp) {
alert(xmlhttp.responseText);
},
error : function (xmlhttp){
alert('请求失败!');
}
});
myajax.js 文件:
function obj2str(data) {
/*
{
"userName" : "Inj",
"userPwd" : "123456"
"t" : "3221312313123"
}
*/
data.t = new Date().getTime();
var res = [];
//for in 专门用来遍历对象的
//key(就是对象的属性), data[key](就是属性对应的属性值)
for(var key in data) {
//在URl中是不可以出现中文的,如果出现中文需要转码
//可以调用encodeURIComponent()方法
//URL中只可以出现字母/数字/下划线/ASCII码(其他的都需要转码)(%25E5%2593%2588%25E5%2593%25)
res.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key])); //[userName=Inj,userPwd=123456]
}
return res.join("&"); //userName=Inj&userPwd=123456
}
// 传入的参数为对象可以使调用对象里面的属性不用按着顺序来
function ajax(option) {
//将对象转换为字符串
var str = obj2str(option.data); //key=value&key=value
//1.创建一个异步对象
//var xmlhttp = new XMLHttpRequest();
//兼容IE5,IE6
var xmlhttp, timer;
if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.设置请求方式和请求地址
/*
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
*/
if(option.type.toLowerCase() == "GET") {
xmlhttp.open(option.type, option.url + "?" + str, true); //提交请求url地址不能出现中文
//3.发送请求
xmlhttp.send();
} else {
xmlhttp.open(option.type, option.url, true);
//注意点:必须放在open和send之间
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(str);
}
//4.监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
/*
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
*/
if(xmlhttp.readyState == 4) {
clearInterval(timer);
//判断请求是否成功
if((xmlhttp.status >= 200 && xmlhttp.status < 300) || xmlhttp.status == 304) {//服务器返回的状态码
//5.处理返回的结果
option.success(xmlhttp);
} else {
option.error(xmlhttp);
}
}
}
//判断外界是否传入超时时间
if(option.timeout) {
timer = setInterval(function () {
console.log("中断请求");
xmlhttp.abort();//关闭请求
clearInterval(timer);
}, option.timeout);
}
}
本人正在学习和摸索中,如有错误,欢迎指正!
原生js ajax与jquery ajax的区别的更多相关文章
- 框架----Django之Ajax全套实例(原生AJAX,jQuery Ajax,“伪”AJAX,JSONP,CORS)
一.原生AJAX,jQuery Ajax,“伪”AJAX,JSONP 1. 浏览器访问 http://127.0.0.1:8000/index/ http://127.0.0.1:8000/fake_ ...
- 原生JS取代一些JQuery方法的简单实现
原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 1.选 ...
- DOM对象和js对象以及jQuery对象的区别
DOM对象和js对象以及jQuery对象的区别 DOM对象和js对象以及jQuery对象的区别 一.DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际 ...
- 原生Ajax--XmlHttpRequest对象和jQuery.ajax()
Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE) 1.XmlHttpRequest对象介绍 XmlHttpRequest对象的主要 ...
- Java程序员之JS(一) 之 JQuery.ajax
背景:紧着现在项目的需要,先从JQuery.ajax出发,主要需求是通过 js 调用Java 代码,从而适应现在的项目. 先从几个概念开始讲解: 一. 什么是Deferred Deferred 对象 ...
- 原生JS版和jQuery 版实现文件上传功能
<!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
- AJAX和jQuery Ajax总结
AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用,改善用户体验,实现无刷新效果的技术. 使用AJAX的优 ...
- 原生JS forEach()和map()遍历的区别以及兼容写法
一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
- AJAX,jQuery Ajax和Deferred
AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用,改善用户体验,实现无刷新效果的技术. 使用AJAX的优 ...
随机推荐
- 003 docker安装nginx
一:安装与运行nginx 1.查找镜像网站 https://c.163yun.com/hub#/m/home/ 2.pull 3.查看当前在运行的容器 docker ps 4.启动nginx 使用后台 ...
- postgre with递归查询组织路径
with递归查询组织路径 SELECT r.id, (array_to_string( array( select name from ( with recursive rec as( select ...
- SQL 对比,移动累计
数据对比 两种常用模型 1.对比下一行,判断增长.减少.维持现状 -- 建表 drop table sales create table sales( num int, soc int ); inse ...
- PHPExcel 导出数据(xls或xlsx)- 助手类(函数)
本文链接:https://www.cnblogs.com/tujia/p/11358096.html 说明:简单好用的导出助手,轻松导出数据到 excel !! 使用示例: Example: Exce ...
- JAVA中try、catch、finally带return的执行顺序总结
异常处理中,try.catch.finally的执行顺序,大家都知道是按顺序执行的.即,如果try中没有异常,则顺序为try→finally,如果try中有异常,则顺序为try→catch→final ...
- K3Wise插件开发实战教程(全套)持续更新中。。。
这是林枫山自己编写制作的全套K3wise插件教程,欢迎下载学习. 下载目录链接如下(如果链接下载不了,请加QQ:714259796获取教程): 进度01-K3Wise数据表详解 下载学习文档 ...
- 【Spring Boot学习之八】发布打包
环境 eclipse 4.7 jdk 1.8 Spring Boot 1.5.2 一.打jar类型1.指定主程序入口,否则运行报错:没有主清单属性pom.xml: <build> < ...
- Tomcat总结四种部署方式
静态部署 一.Webapps 把项目复制到Tomcat的Webapps 把war包复制到Tomcat的Webapps下 *修改Webapps的默认路径: * Tomcat的conf目录下的server ...
- JDK8从永生代到元数据区
永生代 永生代默认的最大内存大小是在32位JVM上为64MB, 在64位JVM上为82MB.可以通过-XX:PermSize=[size]和-XX:MaxPermSize=[size]来调整. 永生代 ...
- 解决GitHub下载慢或下载失败问题
1.登录自己的码云账户 码云网站:https://gitee.com/luckyplj8/events 2.新建一个仓库. 3.选择导入已有仓库. GitHub资源链接: 4.等待码云克隆项目,大概1 ...