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 ...
随机推荐
- 一道面试题比较synchronized和读写锁
一.科普定义 这篇博文的两个主角“synchronized”和“读写锁” 1)synchronized 这个同步关键字相信大家都用得比较多,在上一篇“多个线程之间共享数据的方式”中也详细列举他的应用, ...
- 输入框焦点时自动清除value
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script typ ...
- c# web 缓存管理
using System; using System.Collections; using System.Text.RegularExpressions; using System.Web; usin ...
- ZOJ 3860: - Find the Spy
3860 - Find the Spy Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%lld & %llu S ...
- LA 4064 Magnetic Train Tracks
题意:给定平面上$n(3\leq n \leq 1200)$个无三点共线的点,问这些点组成了多少个锐角三角形. 分析:显然任意三点可构成三角形,而锐角三角形不如直角或钝角三角形容易计数,因为后者有且仅 ...
- MySQL bin-log 日志清理方式
MySQL bin-log 作用 1.数据恢复:如果你的数据库出问题了,而你之前有过备份,那么可以看日志文件,找出是哪个命令导致你的数据库出问题了,想办法挽回损失. 2.主从服务器之间同步数据:主 ...
- 如何让其他计算机访问我的计算机上数据库mysql
第一种:能ping通,说明你们在同一个网络中,可以直接访问.你只要在你的登录用户中的帐号加上可外部访问就可以了...也就是授权.比如你的帐号是root 你可以进入mysql后, 你可以看到,每个帐 ...
- sqlserver2008安装教程
这几天因为需要,一直想安装sql server 2008来作为Web后台的数据库进行些实验,但总是没有时间,今天终于有时间了,便安装了SQL Server 2008,以下是我的安装的步骤,希望对于有需 ...
- JS中的call()和apply()方法和bind()
1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...
- Educational Codeforces Round 1 A
In this problem you are to calculate the sum of all integers from 1 to n, but you should take all po ...