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. LoadRunner配置方案

    1.配置方案运行时设置 选择“Tools”>“Options”.在“Options”对话框有“Run-Time Settings”(运行时设置).“Timeout”(超时).“Run-Time  ...

  2. thinkphp5.0配置作用域

    作用域 配置参数支持作用域的概念,默认情况下,所有参数都在同一个系统默认作用域下面.如果你的配置参数需要用于不同的项目或者相互隔离,那么就可以使用作用域功能,作用域的作用好比是配置参数的命名空间一样. ...

  3. OOD沉思录 --- 面向动作与面向对象 --- 避免泛滥成灾的类

    3.7 从设计中取出不需要的类 只有Get/Set方法的类不算是一个必要的类,Get/Set方法也不算是有意义的行为.这种类降级为属性更加合适. 3.8 去除系统外部的类 如果一个类只调用系统领域的方 ...

  4. 20169211《Linux内核原理与分析》第二周作业

    <linux内核分析>实验一实验报告 <linux内核设计与实现>第1.2.18章学习总结 一.<linux内核分析>实验一实验报告        在进行实验楼操作 ...

  5. Mac 命令行美化

    在 mac 中使用原生的命令行工具,竟然没有 git 命令的自动补全,在 git 仓库下也看不到当前的分支名,不能忍.于是,开始一波改造. 目标:命名 Tab 自动补全:可以显示分支名: 一番 Goo ...

  6. 消息中间件ActiveMQ使用详解

    消息中间件ActiveMQ使用详解 一.消息中间件的介绍 介绍 ​ 消息队列 是指利用 高效可靠 的 消息传递机制 进行与平台无关的 数据交流,并基于 数据通信 来进行分布式系统的集成. 特点(作用) ...

  7. React Native踩坑之Unable to load script from assets

    报错: Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged corr ...

  8. Codeforces Round #436 (Div. 2) E. Fire(dp 记录路径)

    E. Fire time limit per test 2 seconds memory limit per test 256 megabytes input standard input outpu ...

  9. The dd command of linux

    The dd command stands for "data duplicator" and used for copying and converting data. It i ...

  10. zabbix-python api(一)

    获取zabbix token #!/usr/bin/env python #coding=utf-8 import json import urllib2 def Gettoken(server_ip ...