方法一:

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. 一招解决OpenERP8.0安装旧版模块报错

    有喜欢尝鲜的网友开始玩8.0了,可是版本还没发布,社区的很多特别好的模块还没有升级到8,所以经常碰到模块无法安装的问题. No module name osv 网友提出将模块的 from osv im ...

  2. a标签的href劫持,做判断后在跳转

    $.ajax({ type: "POST", url: "/resource/logincheck", data: {id: id}, success: fun ...

  3. mysql (master/slave)复制原理及配置

    1 复制概述 Mysql内建的复制功能是构建大型,高性能应用程序的基础.将Mysql的数据分布到多个系统上去,这种分布的机制,是通过将Mysql的某一台主机的数据复制到其它主机(slaves)上,并重 ...

  4. Symfony2学习笔记之表单

    对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最 ...

  5. nested push animation can result in corrupted navigation bar

    2013-12-06 10:15:51.668 CodingForFun[4569:70b] nested push animation can result in corrupted navigat ...

  6. python GUI模块的转变

    Tkinter → tkintertkMessageBox → tkinter.messageboxtkColorChooser → tkinter.colorchoosertkFileDialog ...

  7. Worm

    Description 自从见识了平安夜苹果的涨价后,Lele就在他家门口水平种了一排苹果树,共有N棵. 突然Lele发现在左起第P棵树上(从1开始计数)有一条毛毛虫.为了看到毛毛虫变蝴蝶的过程,Le ...

  8. while (cin>>str)退出死循环

    今天在练习的时候突然发现了这个问题,百度之感觉还挺常见的,故记之! //题目描述 // //写出一个程序,接受一个十六进制的数值字符串,输出该数值的十进制字符串. // //输入描述 : //输入一个 ...

  9. echart图表控件配置入门(一)

    现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...

  10. android get uuid获取uuid

    https://github.com/Paldom/UniqueDeviceID protected void getDeviceUUID(){ try { Context context = cor ...