项目中关于AJAX的使用总结
一、使用情况：AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下使用。AJAX的核心：向服务器发送多个请求而无需用户等待来至服务器的响应。
二、AJAX的优势
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//第一步：买手机 var ajax=new XMLHttpRequest();
if (window.XMLHttpRequest){
var ajax=new XMLHttpRequest();//现代浏览器
}
else{
var ajax=new ActiveXObject("Msxml2.XMLHTTP");//见人IE6
}
//第二步：拨电话号
ajax.open("get","test.txt",true);//1.http方法get/post 2.请求的URL地址，可以为绝对地址也可以为相对地址。3.设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。
//第三步：发送
ajax.send();
//第四步：拨号成功
ajax.onreadystatechange=function (){
// alert(ajax.readyState);
if (ajax.readyState==4){
// alert("已完成");
if (ajax.status>=200&&ajax.status<300||ajax.status==304){
//对方回复
alert(ajax.responseText);
}
}
}
// alert(ajax);
// console.log(ajax);
</script>
</head>
<body>
</body>
</html>
function fnAjax(url,succFn,faildFn){
if (window.XMLHttpRequest){
var ajax=new XMLHttpRequest();
}
else{
var ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
ajax.open("get",url,true);
ajax.send();
ajax.onreadystatechange=function (){
if (ajax.readyState==4){
if (ajax.status>=200&&ajax.status<||ajax.status==304){
succFn(ajax.responseText);
}
else{
faildFn();
}
}
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height: 100px;
width: 100px;
background-color: #ccc;
display: none;
}
</style>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.onload=function (){
var btns=document.getElementsByTagName("input");
var divs=document.getElementsByTagName("div");
for (var i = 0; i < btns.length; i++) {
btns[i].index=i;
btns[i].onclick=function (){
for (var i = 0; i < btns.length; i++) {
divs[i].style.display="none";
};
divs[this.index].style.display="block";
//h/a2.html
var _this=this;
fnAjax("h/a"+(this.index+1)+".html",function (str){
// alert(str);
divs[_this.index].innerHTML=str;
});
}
};
}
</script>
</head>
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<div style="display:block;">
<p>我是a1</p>
</div>
<div></div>
<div></div>
</body>
</html>
项目中关于AJAX的使用总结的更多相关文章
- 项目中关于ajax jsonp的使用
项目中关于ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法总算搞定了,记录一下 function TestAjax() { $.ajax({ ...
- Struts2项目中使用Ajax报错
在Struts2项目中使用Ajax向后台请求数据,当添加了json-lib-2.3-jdk15.jar和struts2-json-plugin-2.3.4.1.jar两个包时,在result中配置ty ...
- JavaWeb项目中使用ajax上传文件
1.jsp $("#cxsc").click(function(){ var bankId = $("#bankId").val(); var formdata ...
- 在.net MVC项目中使用ajax进行数据验证
1.首先要在网页引入应该引入的js文件 在这里回顾一下在模板页里面挖坑的技术 2.在html中使用html辅助方法 3.验证模型 4验证方法
- django项目中的ajax分页和条件查询。
1,路由 #主页面路由 re_path('article/article_list/', article.article_list,name='article/article_list/'), #分页 ...
- Vue.js项目中使用 Ajax 和 FormDate 对象上传文件
let param = new FormData(); param.append("paths", this.ruleForm.uploadPath); param.append( ...
- 实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: n ...
- C# 动态创建SQL数据库（二） 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示，编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求
C# 动态创建SQL数据库(二) 使用Entity Framework 创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...
- JavaEE-09 Ajax与jQuery在JavaEE项目中的使用
学习要点 JavaScript实现Ajax jQuery实现Ajax JSON JSON-LIB FastJSON JavaScript实现Ajax 认识Ajax 旧版百度地图 百度搜索自动补全 百度 ...
随机推荐
- 原生的UITableViewCell高度自适应，textLabel自动换行显示
/* * 设置子项cell **/ - (UITableViewCell *)getChildCell:(UITableView *)tableView and:(NSIndexPath *)inde ...
- 使用SignalR和SQLTableDependency跟踪数据库中记录的变动
原文地址:查看 SqlTableDependency是一个组件用来接收数据库的通知,包含在数据表上该记录的值的Inserted.Deleted或者Update操作. 备注:原文提供示例代码下载,但是j ...
- 解决rsync 同步auth failed on module问题
今天在同步备份文件时遇到一个情况,以前正常的备份,在昨天突然同步备份文件失败了.于是开始检查原因..... 报错日志/var/log/rsyncd.log发现错误 // :: [] auth fail ...
- 基于java的InputStream.read(byte[] b,int off,int len)算法学习
public int read(byte[] b, int off, int len) throws IOException 将输入流中最多 len 个数据字节读入字节数组.尝试读取多达 len 字节 ...
- nodejs学习随机记录
1. nodejs的顶层对象:global(nodejs中没有window) 2. nodejs一个文件就是一个模块 每个模块都有自己的作用域 通过var声明的变量,只属于当前模块下,并非全局的 va ...
- TensorFlow深度学习笔记 文本与序列的深度模型
Deep Models for Text and Sequence 转载请注明作者:梦里风林 Github工程地址:https://github.com/ahangchen/GDLnotes 欢迎st ...
- Hadoop伪分布式搭建步骤
说明: 搭建环境是VMware10下用的是Linux CENTOS 32位,Hadoop:hadoop-2.4.1 JAVA :jdk7 32位:本文是本人在网络上收集的HADOOP系列视频所附带的 ...
- JTextPane 的 undo 、 redo
实现文本框输入内容的单条记录撤销,重做,通过按钮实现 以及通过JList的多条撤销.重做操作(类似PS) 昨天还在为自己写不出代码怎么办而伤心,没想到今天上午就实现了,并且还完善了功能: 可以在撤销一 ...
- C语言的本质（28）——C语言与汇编之用汇编写一个Helloword
为了更加深入理解C语言的本质,我们需要学习一些汇编相关的知识.作为最基本的编程语言之一,汇编语言虽然应用的范围不算很广,但是非常重要.因为它能够完成许多其它语言所无法完成的功能.就拿 Linux 内核 ...
- linux之SQL语句简明教程---INSERT INTO
到目前为止,我们学到了将如何把资料由表格中取出.但是这些资料是如果进入这些表格的呢? 这就是这一页 (INSERT INTO) 和下一页 (UPDATE) 要讨论的. 基本上,我们有两种作法可以将资料 ...