AJAX 简介
什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
AJAX 实例解释
上面的 AJAX 应用程序包含一个 div 和一个按钮。
div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：
<html>
<body> <div id="myDiv"><h3>Let AJAX change this text</h3></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button> </body>
</html>
接下来，在页面的 head 部分添加一个 <script> 标签。该标签中包含了这个 loadXMLDoc() 函数：
<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>
下面的是我在开发农业信息平台项目时候所使用的一些 AJAX 的工作原理代码。
<script language="javascript" type="text/javascript">
function chg() {
if ($("#sel").val() == "FPhone") {
// $("#FPhone").focus(function () {
// $("#FPhone").val("");
// });
// $("#FPhone").blur(function () {
// $("#FPhone").val("请输入手机号码");
// });
$("#FPhone").show();
$("#FMail").hide(); // var o = document.form1.sel;
// $("#FMail").val() = "";
$("#FSafeQuestion").hide();
// $("#FSafeQuestion").val() = "";
$("#key").hide();
// $("#key").val() = "";
}
else if ($("#sel").val() == "FMail") {
// $("#FMail").focus(function () {
// $("#FMail").val("");
// });
// $("#FMail").blur(function () {
// $("#FMail").val("请输入电子邮箱"); //请输入电子邮箱
// });
$("#FMail").show();
$("#FPhone").hide();
// $("#FPhone").val() = null;
$("#FSafeQuestion").hide();
// $("#FSafeQuestion").val() = null;
$("#key").hide();
// $("#key").val() = null;
}
else {
$("#FSafeQuestion").show();
$("#key").show();
$("#FPhone").hide();
// $("#FPhone").val() = null;
$("#FMail").hide();
// $("#FMail").val() = null;
}
}
// $(function () {
// $("#submit").click(function () {
// if ("@ViewBag.ErrorMsg1" != "") {
// $('#trErrorMsg').hide();
// alert("'@ViewBag.ErrorMsg1'");
// } //错误提示放哪儿？ 阻挡不住验证的效果！
// else if ("@ViewBag.ErrorMsg2" != "") {
// alert("'@ViewBag.ErrorMsg2'");
// }
// else {
// // alert("该手机号码已存在！");
// return alert("该手机号码已存在！");
//
// }
// // return true;
// });
// });
// function check() {
//
//
// alert("'@ViewBag.ErrorMsg'");
// }
</script>
这里的ajax是用于对输入框的显示和隐藏操作：
<!--找回密码的方式-->
<tr>
<td height="" align="right" class="grey_font_style2">
<select class="wd" id="sel" onchange="chg()" size="" style="font-family: Verdana,Arial;
font-size: 10pt;">
<option value="FPhone">电话号码</option>
<option value="FMail">电子邮箱</option>
<option value="FSafeQuestion">安全问题</option>
</select>
<td height="" align="right" class="grey_font_style2" id="change">
<input type="text" value="" name="FPhone" id="FPhone" size="" style="font-family: Verdana,Arial;
font-size: 10pt font-color: #CCC" class="wd2" />
<input type="text" value="" name="FMail" id="FMail" style="display: none; font-family: Verdana,Arial;
font-size: 10pt;" class="wd2" />
<select name="FSafeQuestion" id="FSafeQuestion" size="" style="display: none; font-family: Verdana,Arial;
font-size: 10pt;" class="wd2">
<option value="" selected="selected">请选择</option>
<option value="我的小学名字">我的小学名字？</option>
<option value="我妈妈的名字">我妈妈的名字？</option>
<option value="我最难忘的日子">我最难忘的日子？</option>
<option value="我的学号或（工号）是">我的学号或（工号）是？</option>
<option value="我配偶的姓名是">我配偶的姓名是？</option>
<option value="我最喜欢的休闲运动是">我最喜欢的休闲运动是？</option>
<option value="我最喜欢的歌曲">我最喜欢的歌曲？</option>
<option value="我最喜爱的电影">我最喜爱的电影？</option>
<option value="自己编写问题">自己编写问题？</option>
</select>
</td>
</td>
</tr>
下面是对回答问题的输入框操作：（这些操作都是在前台页面上进行）
<tr id="key" style="display: none;">
<td align="right">
<span class="register_mid_font_red"></span>你的答案是：
</td>
<td>
<input type="text" value="" name="FSafeAnswer" id="FSafeAnswer" style="font-family: Verdana,Arial;
font-size: 10pt;" class="wd2" />
</td>
</tr>
以上就是我第一次使用ajax时候的相关笔记和相关代码。
AJAX 简介的更多相关文章
- PHP AJAX 简介
AJAX 简介 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 是什么? AJAX = Asynchronous JavaScript and XML. AJAX ...
- {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)
Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...
- js进阶课程ajax简介（ajax是浏览器来实现的）
js进阶课程ajax简介(ajax是浏览器来实现的) 一.总结 1.ajax使用需要服务器支持,比如phpstudy 2.ajax是浏览器支持的功能:ajax有个核心对象XMLHttpRequest, ...
- {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)
{Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) Django基础七之 ...
- ajax简介及JS写原生ajax
ajax 1.什么是ajax ajax 的全称是Asynchronous JavaScript and XML,其中, Asynchronous 是异步的意思,指的是异步 JavaScript 和 X ...
- AJAX简介
基本介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML). 国内翻译常为“阿贾克斯”和阿贾克斯足球队同音.Web应用的交互如Fli ...
- 1.AJAX简介
没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,比如实现显示服务器时间.每次都要刷新页面的坏处:页面刷新打断用户操作.速度慢.增加服务器的流量压力.如果没有AJAX ...
- AJAX开发技术--AJAX简介
Asynchronous JavaScript and XML,异步JavaScript和XML 主要目的用于页面的局部刷新.不用全部刷新,提高性能. 在AJAX中主要是通过XMLHttpReque ...
- jQuery AJAX 简介
AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. jQuery AJAX 实例 使用 jQuery AJAX 修改文本内容 尝试一下 » 什么是 AJAX? A ...
随机推荐
- jdk8飞行记录器配置
jdk8提供了jmc工具,应该比visualvm厉害吧 下面贴一份tomcat的配置,自己留个备份,把下面的内容粘贴到tomcat setenv.sh就可以了 nowday=`date +%Y%m%d ...
- Maven3.x 插件开发入门
Maven工具有很多插件,各种各样的插件,让我们开发调试过程中非常方便,但是终究是有你想要的但是现目前插件不能满足的(可能性非常非常低),这个时候就需要使用其他的替代工具,或者是自己来开发一个Mave ...
- C#：反射
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- shareSDK集成步骤
按下面目录结构吧sdk的目录文件拷贝到自己的工程中 针对各个平台的分享格式,整理成了一个工具类,不同的平台分享的参数http://wiki.mob.com/不同平台分享内容的详细说明/ package ...
- xcode4.3 完成输入后 点击背景关闭键盘
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ [self.view endEditing:YES];} 把这个复制到 ...
- AGPS 常见的两种定位模式
SI 定位模式: 用户发起定位请求,辅助GPS 模块快速进行定位.时间在6秒-15秒之间. 这个方式能够有效的解决普通GPS 最快需要30秒时间获得卫星星历的搜星慢的问题,如果使用AGPS将通过中移动 ...
- [团队项目]sprint3 & 团队贡献分。
希望各组认真准备,拿出最好的阵容最好的状态,展示一学期的学习与工作成果. 各组注意完成sprint3的博客,写上团队贡献分. 将演示PPT(如果有)和代码上传到github. 截止日期:2016.6. ...
- easyui enableFilter combobox级联 combotree
//网格过滤 function datagridFilter(dg){ dg.datagrid('enableFilter'); dg. ...
- Area(Pick定理POJ1256)
Area Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 5429 Accepted: 2436 Description ...
- 使用 /proc 文件系统来访问 linux操作系统 内核的内容 && 虚拟文件系统vfs及proc详解
http://blog.163.com/he_junwei/blog/static/19793764620152743325659/ http://www.01yun.com/other/201304 ...