复习原生ajax
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):原生ajax
接到电话面试,有一些送分题答的不好,在这里整理一下 问题:原生ajax的工作流程是怎么样的? 老用封装好的工具,原生的ajax其实并不熟悉,今天复习一下.主要参考http://www.w3school ...
- 使用原生Ajax进行用户名重复的检验
title: 使用原生Ajax进行用户名重复的检验(一) date: 2019-01-21 17:35:15 tags: [JavaScript,Ajax] --- Ajax的复习 距离刚开始学aja ...
- 原生Ajax
使用原生Ajax 验证用户名是否被注册 创建出注册信息: <h1>注册信息</h1><input type="text" name="txt ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- 原生Ajax 和Jq Ajax
前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...
- 手写原生ajax
关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...
- 浅谈AJAX的基本原理和原生AJAX的基础用法
一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...
- python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,
python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...
- [译]脱离jQuery,使用原生Ajax
脱离jQuery,使用原生Ajax 标签: Ajax translate 英文出处:<A Guide to Vanilla Ajax Without jQuery> 翻译: 刘健超 J.c ...
随机推荐
- Educational Codeforces Round 45 (Rated for Div. 2) F - Flow Control
F - Flow Control 给你一个有向图,要求你给每条边设置流量,使得所有点的流量符合题目给出的要求. 思路:只有在所有点的流量和为0时有解,因为增加一条边的值不会改变所有点的总流量和, 所以 ...
- poj1475 Pushing Boxes(BFS)
题目链接 http://poj.org/problem?id=1475 题意 推箱子游戏.输入迷宫.箱子的位置.人的位置.目标位置,求人是否能把箱子推到目标位置,若能则输出推的最少的路径,如果有多条步 ...
- XML DOM(Document Object Model)
1.XML DOM 是用于获取.更改.添加或删除 XML 元素的标准.2.节点(XML 文档中的每个成分都是一个节点): 整个文档是一个文档节点: 每个XML元素是一个元素 ...
- 【转载】retrofit 2 源码解析
retrofit 官网地址:http://square.github.io/retrofit/ retrofit GitHub地址:https://github.com/square/retrofit ...
- SCU 4441 Necklace
最长上升子序列,枚举. 因为$10000$最多只有$10$个,所以可以枚举采用哪一个$10000$,因为是一个环,所以每次枚举到一个$10000$,可以把这个移到最后,然后算从前往后的$LIS$和从后 ...
- 深入理解javascript作用域系列第三篇
前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javascript作用域系列第三篇——声明提升(hois ...
- jni java C/C++ 相互调用
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha java 中 声明 一个 native 方法 用javah命令 生成 包含 nativ ...
- Codeforces 622 F. The Sum of the k-th Powers
\(>Codeforces \space 622\ F. The\ Sum\ of\ the\ k-th\ Powers<\) 题目大意 : 给出 \(n, k\),求 \(\sum_{i ...
- MySQL注射绕过技巧
本次对以前注入的一些总结. 总有在注入的时候发现有waf或者对参数过滤了 ~~ 做个文章记录下思路吧 ①.通过greatest函数绕过不能使用大小于符号的情况 我们在猜解单个字符时 通常会判断字符 ...
- [转]Intent和PendingIntent的区别
intent英文意思是意图,pending表示即将发生或来临的事情. PendingIntent这个类用于处理即将发生的事情.比如在通知Notification中用于跳转页面,但不是马上跳转. Int ...