原生JS操作AJAX
1,get方式的AJAX
function sendAjaxReq()
{
//1,创建ajax引擎 XMLHttpRequest对象
var req = new XMLHttpRequest() || new ActiveXObject("Msxm12.XMLHTTP");
//2,打开一个请求,此时未发送请求,定义好发送请求的方式以及是否需要携带数据 是否同步异步
req.open("get", "testAjax?phone=iphone&apple=pen");
//3,准备好处理服务器返回的数据
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
//返回json数据的解析格式
var str = req.responseText;
eval("var obj=" + str);
alert(obj.name);
//返回xml的解析格式
var data = req.reponseXML.getElementsByTagName("bigName")[0].first(child.data);
}
}
//4,发送请求,如果是在火狐下,使用get方式发送ajax请求,send的时候括号写上null
req.send(null);
}
2,post方式AJAX
//使用post传参,需要携带一个请求头模拟表单提交
function sendAjax()
{
var request = new XMLHttpRequest() || new ActiveXObject("Msxm12.XMLHTTP");
request.open("post", "testAjax?phone=1", true)
request.onreadystatechange = function()
{
if(request.readyState == 4)
{
if(request.status == 200)
{
var str = request.responseText;
alert(str);
}
else if(request.status == 404)
{
alert("找不到资源");
}
}
}
request.setRequestHeader("content-type", "application/x-www-form-urlencoded")
request.send("phone=");
}
3,封装了get和post的AJAX
function sendAjaxReq(method,url,param,fun200,fun404,fun500)
{
var req;
if(window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
req = new ActiveXObject("Msxml2.XMLHTTP");
}
req.open(method,url);
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
if(fun200)
{
fun200(req.responseText);
}
}
else if(req.status == 404)
{
if(fun404)
{
fun404();
}
}
else if(req.status == 500)
{
if(fun500)
{
fun500();
}
}
}
}
if(method.toUpperCase() == "GET")
{
req.send(null);
}
else if(method.toUpperCase() == "POST")
{
req.setRequestHeader("context-type", "application/x-www-form-urlencoded");
req.send(param);
}
} function testAjax()
{
sendAjaxReq("get","ajaxServlet?uname=1&password=2",null,function(data)
{
eval("var obj="+data);
alert(obj.data);
});
}

原生JS操作AJAX的更多相关文章
- 原生js实现Ajax
		一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ... 
- 框架操作DOM和原生js操作DOM比较
		问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ... 
- 原生JS实现Ajax及Ajax的跨域请求
		前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ... 
- 原生JS的Ajax技术
		1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ... 
- 用原生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封装
		一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ... 
- [javascript]原生js实现Ajax
		一.首先看JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataType: '', data: { }, success: function(){ }, err ... 
- 使用原生js写ajax
		// 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ... 
随机推荐
- [No00004F]史上最全Vim快捷键键位图(入门到进阶)vim常用命令总结
			在命令状态下对当前行用== (连按=两次), 或对多行用n==(n是自然数)表示自动缩进从当前行起的下面n行.你可以试试把代码缩进任意打乱再用n==排版,相当于一般IDE里的code format.使 ... 
- Gym - 101020H Weekend  floyd+next_permutation
			https://vjudge.net/problem/Gym-101020H 题意:正常读取方式给你一个图(双向的),然后给你f个点,让你找一条路从1到n的最短路,要求经过f个点(以任意顺序). 题解 ... 
- win7 链接打印机时提示未知的用户名或错误密码
			使用win7系统时,访问局域网内的计算机 \\ip 要求输入正确用户名和密码,输入用户名和密码后,还是一直提示“未知的用户名或错误密码”. 解决方法: 开始---->运行 打开组策略编辑器 gp ... 
- CF1053E Euler tour 构造
			正解:构造 解题报告: 传送门! 这种题目一般都是首先考虑合法性 这题也不例外,思考怎么样是合法的呢? 有四点: 1)a[1]=a[2n-1],显然不说 2)若a[i]=a[j],则(j-i)& ... 
- 正则表达式(二):Unicode诸问题上篇(转)
			原文:http://www.infoq.com/cn/news/2011/02/regular-expressions-unicode 关于正则表达式的文档很多,但大部分都是英文的,即便有中文的文档, ... 
- Shiro的使用
			前言 相比有做过企业级开发的童鞋应该都有做过权限安全之类的功能吧,最先开始我采用的是建用户表,角色表,权限表,之后在拦截器中对每一个请求进行拦截,再到数据库中进行查询看当前用户是否有该权限,这样的设计 ... 
- 常见浏览器兼容性问题与解决方案css篇
			浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里 ... 
- 群用户通过微信小程序可以更好地协作了
			今天,小程序向开发者开放了群ID的接口能力.简单地说,就是当你把小程序分享在群聊中,被点击后开发者可获取群ID和群名称,也方便更好地针对群场景提供个性化服务.不同的群有各自的群ID,那么这个新能力开发 ... 
- how to add borders for a google map marker 谷歌地图 自己定义图钉
			If you are not satisfied with default Google map Marker (Default google marker can only be a icon, i ... 
- 全局ID的重要性
			全局ID的重要性 体现在sharding的时候 gtid MySQL:global transaction id uuid:universally unique identifier guid:glo ... 
