function ajax(url, fnSucc, fnFaild)
{
//1.创建
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();
}
else
{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
} //2.连接
oAjax.open('GET', url, true); //3.发送
oAjax.send(); //4.接收
oAjax.onreadystatechange=function ()
{
if(oAjax.readyState==4) //完成
{
if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304)
{
//alert('成功:'+oAjax.responseText);
if(fnSucc)
{
fnSucc(oAjax.responseText);
}
}
else
{
//alert('失败:'+oAjax.status);
if(fnFaild)
{
fnFaild(oAjax.status);
}
}
}
};
}

辅助函数处理url

function json2url(json){
json.t=Math.random(); var arr=[]; for(var i in json)
{
arr.push(i+'='+json[i]);
} return arr.join('&');
}

实例1:读取文字

window.onload=function ()
{
var oBtn=document.getElementById('btn1'); oBtn.onclick=function ()
{
//alert('aaa.txt?t='+Math.random());
ajax('aaa.txt?t='+Math.random(), function (str){
//str——从服务器读回来的内容
alert(str);
});
};
};

实例2:注册和登陆

window.onload=function(){
var oAddUser=document.getElementById('add_user');
var oAddPass=document.getElementById('add_pass');
var oAddBtn=document.getElementById('add_btn'); oAddBtn.onclick=function()
{
var url='user.php?'+json2url({
act:'add',
user:oAddUser.value,
pass:oAddPass.value
}) ajax(url,function(str){
var json=eval('('+str+')');
if(json.error){
alert('有问题'+json.desc);
}else{
alert('注册成功');
}
},function(){
alert('失败');
});
}; var oLgnUser=document.getElementById('login_user');
var oLgnPass=document.getElementById('login_pass');
var oLgnBtn=document.getElementById('login_btn'); oLgnBtn.onclick=function(){
var url='user.php?'+json2url({
act:'login',
user:oLgnUser.value,
pass:oLgnPass.value
}) ajax(url,function(str){
var json=eval('('+str+')');
if(json.error){
alert('有问题'+json.desc);
}else{
alert('登陆成功');
}
},function(){
alert('失败');
})
};
};

本文属于原创,如需转载请注明地址

复习原生ajax的更多相关文章

  1. 面试整理(1):原生ajax

    接到电话面试,有一些送分题答的不好,在这里整理一下 问题:原生ajax的工作流程是怎么样的? 老用封装好的工具,原生的ajax其实并不熟悉,今天复习一下.主要参考http://www.w3school ...

  2. 使用原生Ajax进行用户名重复的检验

    title: 使用原生Ajax进行用户名重复的检验(一) date: 2019-01-21 17:35:15 tags: [JavaScript,Ajax] --- Ajax的复习 距离刚开始学aja ...

  3. 原生Ajax

    使用原生Ajax 验证用户名是否被注册 创建出注册信息: <h1>注册信息</h1><input type="text" name="txt ...

  4. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  5. 原生Ajax 和Jq Ajax

    前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...

  6. 手写原生ajax

    关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...

  7. 浅谈AJAX的基本原理和原生AJAX的基础用法

    一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...

  8. python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  9. [译]脱离jQuery,使用原生Ajax

    脱离jQuery,使用原生Ajax 标签: Ajax translate 英文出处:<A Guide to Vanilla Ajax Without jQuery> 翻译: 刘健超 J.c ...

随机推荐

  1. openssl解析国密X509证书

    openssl解析国密X509证书,把公钥拿出来重写一下就行了        x = strToX509(pbCert, pulCertLen);dwRet = getCertPubKey(x, &a ...

  2. ul>li中自定义属性后取值的问题

    动态赋值的li: $.ajax({ type: "POST", url: "${base}/before/subDemand/listType", succes ...

  3. 洛谷——P1907 设计道路

    P1907 设计道路 题目描述 Caesar远征高卢回来后,对你大加赞赏,他亲自来到Genoa视察. Genoa在你的建设下变得无比繁荣,由于财政收入的增加,你为城市修建了交通系统.古罗马的交通系统由 ...

  4. iTerm2配置

    1.颜色Solarized 首先下载 Solarized: $ git clone git://github.com/altercation/solarized.git Terminal/iTerm2 ...

  5. Python操作Mongo数据库

    连接数据库 import pymongo # 连接到数据库,以下两种方式均可 client = pymongo.MongoClient(host='localhost', port=27017) cl ...

  6. 我的OI生涯番外篇

    番外篇 转眼间我学oi已经一年了,可回头想想这一年来的收获也没有什么,大部分时间都荒废掉了. 下半年开学后,学物竞的王洋转来了我们电竞,虽然他之前是我的同班同学但也没怎么交流过. 这下我们又成为了oi ...

  7. [BZOJ4868][六省联考2017]期末考试(三分)

    4868: [Shoi2017]期末考试 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 964  Solved: 439[Submit][Status ...

  8. 所以学树分块的时候为什么要看vector啊sjb

    明明应该拼命刷题却悠哉补着vector和指针 -------------------------------------------------------------------题记 http:// ...

  9. 字符约束条件的SQL注入攻击

    引言 目前值得高兴的是,开发者在建立网站时,已经开始关注安全问题了——几乎每个开发者都知道SQL注入漏洞了.在本文中,我将为读者介绍另一种与SQL数据库相关的漏洞,虽然它的危害性与SQL注入不相上下, ...

  10. [CodeForces850C]Arpa and a game with Mojtaba

    题目大意: 给你一个包含n个数的数列,两个人轮流对数列进行如下操作: 选择一个质数p和一个正整数k,将数列中所有能被p^k整除的数除以p^k. 最后不能操作者负. 问先手是否有必胜策略. 思路: 显然 ...