原生JS实现$.ajax
function ajax(obj){
obj=obj||{};
obj.type=(obj.type||'GET').toUpperCase();
obj.dataType=obj.dataType||'json';
var params=formatParams(obj.data);//参数格式化
//step1:兼容性创建对象
if(window.XMLHttpRequest){
var xhr=new XMLHttpRequest();
}
else{
var xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
//step4: 接收
xhr.onreadystatechange=function(){
if(xhr.readtState==4){
if(xhr.state>=200 && xhr.status<300){
obj.success&&obj.success(xhr.responseText,xhr.responseXML);
}
else{
obj.error&&obj.error(xhr.status);
}
}
}
//step2 step3:连接 和 发送
if(obj.type=='GET'){
xhr.open('GET',obj.url+'?'+params,true);
xhr.send(null);
}
else if(obj.type=='POST'){
xhr.open('POST',obj.url,true);
//设置请求头,以表单形式提交数据
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(params);
}
//辅助函数,格式化参数
function formatParams(data){
var arr=[];
for(var name in data){
arr.push(encodeURICompontent(name)+"="+encodeURICompontent(data[name]));
}
//设置随机数,防止缓存
arr.push("t="+Math.random());
return arr.join("&");
}
}
使用:
ajax({
url:"www.baidu.com",
type:"GET",
dataType:"json",
data:{a:"123",b:"456"},
success:function(response.xml){//todo something},
error:function(status){//todo something}
})
原生JS实现$.ajax的更多相关文章
- 原生js实现Ajax
一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...
- 使用原生js写ajax
// 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- 原生JS实现Ajax及Ajax的跨域请求
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
- 原生JS的Ajax技术
1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...
- 原生js中用Ajax进行get传参
原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- 原生js实现ajax与jquery的ajax库,及json
这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...
- 用原生js实现ajax、jsonp
转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...
- 原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...
- 原生js写Ajax
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
随机推荐
- python数据结构与算法第三天【时间复杂度计算方法】
最优时间复杂度(不可靠) 最坏时间复杂度(保证) 平均时间复杂度(平均状况) 不同语句的时间复杂度: (1)顺序语句:使用加法 (2)循环语句:使用乘法 (3)分支语句:使用坏时间复杂度 例如:如下代 ...
- Python包的相对导入时出现问题解决
资料参考: https://www.cnblogs.com/ArsenalfanInECNU/p/5346751.html 在python导入包,如下: from .units import * 经常 ...
- nginx 负载均衡(默认算法)
使用 nginx 的upstream模块只需要几步就可以实现一个负载均衡: 在 nginx 配置文件中添加两个server server { listen ; server_name 192.168. ...
- Linux命令归纳
Linux基本命令 Linux Xshell远程连接 ssh 用户名@id地址 例如: ssh root@192.168.11.53 增加类指令 创建文件夹 mkdir 文件名 mkdir -p 路径 ...
- BZOJ5418[Noi2018]屠龙勇士——exgcd+扩展CRT+set
题目链接: [Noi2018]屠龙勇士 题目大意:有$n$条龙和初始$m$个武器,每个武器有一个攻击力$t_{i}$,每条龙有一个初始血量$a_{i}$和一个回复值$p_{i}$(即只要血量为负数就一 ...
- 学习Android过程中遇到的问题及解决方法——网络请求
在学习Android的网络连接时遇到崩溃或异常(出现的问题就这两个,但是不稳定)的问题,先上代码,看看哪里错了(答案在文末) activity_main.xml: <?xml version=& ...
- [NOIp2009] $Hankson$ 的趣味题
类型:数论 传送门:>Here< 题意:给出四个数$a_0,a_1,b_0,b_1$,求满足$gcd(x,a_0)=a_1,lcm(x,b_0)=b_1$的$x$的个数 解题思路 显然$a ...
- PIGS POJ - 1149(水最大流)
题意: 有M个猪圈,每个猪圈里初始时有若干头猪.一开始所有猪圈都是关闭的.依次来了N个顾客,每个顾客分别会打开指定的几个猪圈,从中买若干头猪.每个顾客分别都有他能够买的数量的上限.每个顾客走后,他打开 ...
- 爬虫_腾讯招聘(xpath)
和昨天一样的工作量,时间只用了一半,但还是效率有点低了,因为要把两个网页结合起来,所以在列表操作上用了好多时间 import requests from lxml import etree heade ...
- 【HDU3032】Nim or not Nim?(博弈论)
[HDU3032]Nim or not Nim?(博弈论) 题面 HDU 题解 \(Multi-SG\)模板题 #include<iostream> #include<cstdio& ...