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 ...
随机推荐
- Spring事务注解@Transactional回滚问题
Spring配置文件,声明事务时,如果rollback-for属性没有指定异常或者默认不写:经测试事务只回滚运行时异常(RuntimeException)和错误(Error). <!-- 配置事 ...
- Shell之while循环
While循环的格式: while expression do command command ... done 1.计数器控制的while循环:主要用于已经准确知道要输入的数据和字符串的数目. 例子 ...
- c#之委托所有方法
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...
- CallableAndFuture
Callable和Runnable的区别如下: I Callable定义的方法是call,而Runnable定义的方法是run. II Callable的call方法可以有返回值,而Runn ...
- Session机制（是对cookie的作用的提升，使用较多）
1.Session作用类似于购物车,第一次,放入物品,可以获得Session的id,并可以设置id失效的时间,这样便于多次将物品放在购物车里面,使用的就是获取的Session的id: 2.Sessio ...
- JQuery知识快览之三—JQuery对象集
本文讲述JQuery对象集的各相关知识 获取JQuery对象集 JQuery对象,和DOM对象是两个不同的东西,JQuery对象可以是DOM对象的封装,但是JQuery对象不只是DOM对象的封装,它还 ...
- interrupt ,interrupted 和 isInterrupted
1.interrupt interrupt方法用于中断线程.调用该方法的线程的状态为将被置为"中断"状态. 注意:线程中断仅仅是置线程的中断状态位,不会停止线程.需要用户自己去监 ...
- register_chrdev、register_chrdev_region以及alloc_chrdev_region之间的区别
register_chrdev:Linux2.6.30之前所用,不用定义cdev:但 如果是register_chrdev 注册的话,这个时候,分配的次设备号,是从0~255,这样子的话,就分配的范围 ...
- Codeforces Round #370 (Div. 2) B
Description Memory is performing a walk on the two-dimensional plane, starting at the origin. He is ...
- 【Nginx】使用Nginx做反向代理时，关于被代理服务器相应的超时设置
> 参考的优秀文章 Module ngx_http_proxy_module > 设置等待被代理服务器的最大响应时间 使用Nginx做反向代理时,因被代理服务器因业务确实复杂,需时较久,往 ...