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 ...
随机推荐
- textarea输入框限制字数（JS）
第一种: <textarea onkeyup="checkLen(this)"></textarea> <div>您还可以输入 <span ...
- POJ 3580：SuperMemo（Splay）
http://poj.org/problem?id=3580 题意:有6种操作,其中有两种之前没做过,就是Revolve操作和Min操作.Revolve一开始想着一个一个删一个一个插,觉得太暴力了,后 ...
- POJ 3349：Snowflake Snow Snowflakes（数的Hash）
http://poj.org/problem?id=3349 Snowflake Snow Snowflakes Time Limit: 4000MS Memory Limit: 65536K T ...
- SpringMVC 接收复杂对象
要发送的数据为:String topicId,String topicName,String summarize,List<ModuleParam> parentList 前端页面ajax ...
- UVa 489，紫书P79，刽子手游戏
题目链接:https://uva.onlinejudge.org/external/4/489.pdf 这个题很像之前的一个拓扑排序的题目,思路类似咯. 程序模块化: 每次判断一个字母,lose,wi ...
- python中zip函数
zip函数接受任意多个(包括0个和1个)序列作为参数,返回一个tuple列表.(在海豚实习时自己写了一个要用到zip的函数,那个例子非常代表性) 示例1 for i,j in zip(range(3) ...
- 编写shell管理脚本（二）
8.1 先测试“/etc/vsftpd”.“/etc/hosts”是否为目录,并通过“$?”变量查看返回状态值,据此判断测试结果.[root@localhost ~]# [ -d /etc/vsft ...
- ContentProvider官方教程(2)简介、Content URIs
In this document Overview Accessing a provider Content URIs Content Provider Basics A content provid ...
- 个人对js闭包的理解
闭包算是前端面试的基础题,但我看了很多关于闭包的文章博客,但感觉很多对于闭包的理想还是有分歧的,现在网上对闭包的理解一般是两种: 有些文章认为闭包必须要返回嵌套函数中里面用到外面函数局部变量的方法 ...
- UVA 11404 五 Palindromic Subsequence
Palindromic Subsequence Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu ...