方法一:

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 = ; i < activexName.length; i++) {
try {
//取出一个控件名进行创建,如果创建成功就终止循环
//如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建
xmlHttpRequest = new ActiveXObject(activexName[i]);
if (xmlHttpRequest) {
break;
}
} catch (e) {
}
}
}
return xmlHttpRequest;
} //post方法
function post() {
//创建AJAX原生环境后用变量接收
var req = createXMLHTTPRequest();
if (req) {
//传参方式,url,是否异步(asyn)
req.open("POST", "webAjax.ashx", true);
//post必须设置这个类型
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//必须带这个传参,就算你要调用的方法不带参数,不管是get还是post有参传参,没参传空
req.send("");
//回调函数,当 readyState 等于 4 且状态为 200 时,表示响应已就绪,可以做数据操作了
req.onreadystatechange = function () {
if (req.readyState == ) {
if (req.status == ) {
//req.responseText可以返回后台的返回内容
alert("success");
} else {
alert("error");
}
} }
}
} //get方法
function get() {
var req = createXMLHTTPRequest();
if (req) {
req.open("GET", "AJAXTest.aspx", true);
req.onreadystatechange = function () {
if (req.readyState == ) {
if (req.status == ) {
alert(req.responseText);
} else {
alert("error");
}
}
}
req.send(null);
}
}

方法二:

 //以get方法为例
var xmlhttp;
function loadXMLDoc(url, cfunc) {
//创建环境
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//创建回调函数
xmlhttp.onreadystatechange = cfunc;
//get方式发送数据
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function myFunction() {
//调用上述的AJAX方法,传入url和回调函数的实现方法(响应就绪时会执行)
loadXMLDoc("/ajax/test1.txt", function () {
if (xmlhttp.readyState == && xmlhttp.status == ) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
});
}

原生的AJAX写法,可以直接复制过来套用的更多相关文章

  1. screen,client,page三种确定鼠标坐标的区别和原生JS事件写法,区别于Jquery的$.on(x,y);和$.click()

    screenX clientX pageX的区别 screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟scre ...

  2. 使用XMLHttpRequest对象完成原生的AJAX请求

    1.大家眼中的Ajax 说到Ajax,只要有过前端开发经验的童鞋一定都不陌生,大都知道它就是一种与后端之间的通信技术,通过这个神奇的家伙,我们不用像传统表单那样填完信息一点提交就呼啦呼啦跳转了.Aja ...

  3. 原生js ajax与jquery ajax的区别

    原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...

  4. js原生的Ajax

    js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的,要使用js原 生的Ajax完成异步操作,有如下几个步骤: 1)创建Ajax引擎对象 2)为Ajax引擎对象绑定监听(监听服务器已 ...

  5. 原生Ajax写法(GET)

    ajax的GET提交方式的原生代码: var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(w ...

  6. 原生ajax写法

    ajax1.0,ie9及以下,ie10+支持ajax2.0 ajax2.0比ajax1.0: 1.多了FormData对象,xhr.send(formData)  //不能用GET 2.文件上传,文件 ...

  7. JS 原生ajax写法

    <script> //step1.创建XMLHTTPRequest对象,对于低版本的IE,需要换一个ActiveXObject对象 var xhr; if (window.XMLHttpR ...

  8. 原生实现ajax解析--XMLHttpRequest

    ajax基础: Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求. 如果仔细观察一个Form的提交,你就会发现,一旦用户点击“Submit ...

  9. 原生javascript Ajax

    代码 1. IE5 ,IE6 使用ActiveXObject对象,   其余现代浏览器都支持XMLHttpRequest对象: function ajaxObject(){ var xmlhttp; ...

随机推荐

  1. res里面的drawable(ldpi、mdpi、hdpi、xhdpi、xxhdpi)

    (1)drawable-hdpi里面存放高分辨率的图片,如WVGA (480x800),FWVGA (480x854) (2)drawable-mdpi里面存放中等分辨率的图片,如HVGA (320x ...

  2. Tyvj 1085 派对

    这道题和HDU 1016的素数环那道题很相似. 虽然1A了,但写代码的过程中还是丢三落四的. 贴完代码闪人,嘿嘿 //#define LOCAL #include <iostream> # ...

  3. 作业调度框架 Quartz.NET 2.0 StepByStep

    注:目前网上诸多介绍Quartz.net的文章,甚至Quartz.net官网上的Tutorial都是1.0版本的,而这个项目在2.0版本对项目进行了比较大规模的修改,使得原有的很多例子都不能运行,故写 ...

  4. shell动态解析sql的binlog

    #!/usr/bin #设置数据库连接 conn='mysql -hhost -Pport -uusername -ppassword' #获取最新的binlog文件 logfile=$($conn ...

  5. BZOJ 4269 再见Xor

    线性基. 求次大值就是再异或一个线性基好了. #include<iostream> #include<cstdio> #include<cstring> #defi ...

  6. UVA 11374 Halum (差分约束系统,最短路)

    题意:给定一个带权有向图,每次你可以选择一个结点v 和整数d ,把所有以v为终点的边权值减少d,把所有以v为起点的边权值增加d,最后要让所有的边权值为正,且尽量大.若无解,输出结果.若可无限大,输出结 ...

  7. 多线程&多进程解析:Python、os、sys、Queue、multiprocessing、threading

    当涉及到操作系统的时候,免不了要使用os模块,有时还要用到sys模块. 设计到并行程序,一般开单独的进程,而不是线程,原因是python解释器的全局解释器锁GIL(global interpreter ...

  8. Android RecyclerView使用详解(三)

    在上一篇(RecyclerView使用详解(二))文章中介绍了RecyclerView的多Item布局实现,接下来要来讲讲RecyclerView的Cursor实现,相较于之前的实现,Cursor有更 ...

  9. Android 高仿微信 获取最近刚刚拍照的缩略图 功能实现

    原理其实挺简单的,android 中文件 修改 增加 删除等等 都会在数据库里的某个表里记录下来,你需要的时候 只要迅速的去查找这个表里的值 即可得到你想要的所有信息. 实际上 如果真正理解这个表结构 ...

  10. library cache lock和cursor: pin S wait on X等待

    1.现象: 客户10.2.0.4 RAC环境,出现大量的library cache lock和cursor: pin S wait on X等待,经分析是由于统计信息收集僵死导致的.数据库在8点到9点 ...