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 ...
随机推荐
- Nagios监控远端的mysql
工作原理: 利用特定的用户定期访问指定的mysql数据库.当不能访问或连不通时则报警. 1.在生产库上安装nagios插件 安装略 备注:编译完显示一定要有mysql支持,不然没有chec ...
- 多拉A梦——日语歌词
こんなこといいな できたらいいな 这件事真好啊 能够做到的话就好啦 あんな梦(ゆめ) こんな梦(ゆめ) いっぱいあるけど 那样的梦想 这样的梦想 我还有好多哪 みんなみんなみんな かなえてくれる 大家 ...
- PHP简单图片操作
<?php //PHP操作图片需打开配置文件中 extension=php_gd2.dll //================================================= ...
- android 动画总结
以下博文讲解比较详细,可查阅: http://www.360doc.com/content/13/0102/22/6541311_257754535.shtml 几个关键属性: setRepeatCo ...
- SDUT 2877:angry_birds_again_and_again
angry_birds_again_and_again Time Limit: 2000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 The problems ...
- html的textarea控制字数小案例
<h3>设计理念说明(200字以内)</h3> <textarea onkeyup="checkLen(this)"></textarea ...
- 周赛-DZY Loves Chessboard 分类： 比赛 搜索 2015-08-08 15:48 4人阅读 评论(0) 收藏
DZY Loves Chessboard time limit per test 1 second memory limit per test 256 megabytes input standard ...
- Unix下五种IO模型
http://blog.chinaunix.net/uid-25324849-id-247813.html 1. I/O模型 Unix下共有五种I/O模型 a. 阻塞I/O b. 非阻塞I/O c. ...
- hiho 第1周 最长回文子串
题目链接:http://hihocoder.com/problemset/problem/1032 #include <bits/stdc++.h> using namespace std ...
- python INFO: Can't locate Tcl/Tk libs and/or headers
安装opencv的时候遇到这个错误: python INFO: Can't locate Tcl/Tk libs and/or headers 参考如下文章解决这个问题: http://www.ver ...