JavaScript增强AJAX基础
<title>js类型</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
//num为number类型
var num = 100;
//str为string类型，注意js中的string类型用''或""均可
var str = "哈哈";
//flag为boolean类型
var flag = true;
</script>
<script type="text/javascript">
//多个script块中的内容，可以相互访问
//alert(flag);
var person = null;
var card;
//alert(card);
//undefined不是字符串，它是一种类型，如果你想判断某个变量是否为undefined，
//通过如下代码判断：
if(card == undefined){
alert("card变量暂没值");
}else{
alert(card);
}
</script>
<title>JS中有三种定义函数的方式</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
/*正常方式(先)
function add(num1,num2){
return num1 + num2;
}
window.alert("10+20=" + add(10,20));
*/
</script>
<script type="text/javascript">
/*构造器方式，最后一个参数为函数体，每个参数都是字符串类型(后)
var add = new Function("num1","num2","return num1+num2");
window.alert("100+200=" + add(100,200));
*/
</script>
<script type="text/javascript">
/*直接量或匿名或无名方式(再)
var add = function(num1,num2){
return num1 + num2;
}
window.alert("1000+2000=" + add(1000,2000));
*/
</script>
<title>JS中有四种对象</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
//Date
//var nowStr = new Date().toLocaleString();
//window.document.write(nowStr + "<br/>");
//Math
//for(var i=1;i<=10;i++){
// //1到9之间的随机整数
// document.write(Math.floor(Math.random()*9)+1 + "<br/>");
//}
//string
//var str = "Hello你好";
//var size = str.length;
//alert(size);//7
//Array
//var array = new Array("语文","数学","英语",true,123);
//for(var i=0;i<array.length;i++){
// document.write(array[i] + " ");
//}
</script>
<script type="text/javascript">
/*自定义对象
function Person(id,name,sal){
this.id = id;
this.name = name;
this.sal = sal;
}
var p = new Person(1,"波波",7000);
document.write("编号:" + p.id + "<br/>");
document.write("姓名:" + p.name + "<br/>");
document.write("薪水:" + p.sal + "<br/>");
*/
</script>
<script type="text/javascript">
//window对象，打开新窗口
//var url = "04_images.html";
//window.open(url);
</script>
<script type="text/javascript">
//status对象，将当前时间设置到状态栏中
//var nowStr = new Date().toLocaleString();
//window.status = nowStr;
</script>
<script type="text/javascript">
//location对象，模拟用户在地址栏输入url访问其它页面的情况
//var url = "04_images.html";
//window.location.href = url;
</script>
<script type="text/javascript">
//history对象，演示刷新
window.history.go(0);
</script>
<form action="04_images.html" method="POST">
<input type="button" value="提交"/>
</form>
<!-- 演示用JS提交表单，重要 -->
<script type="text/javascript">
//定位提交按钮
var inputElement = document.getElementsByTagName("input")[0];
//为提交按钮添加单击事件
inputElement.onclick = function(){
//定位<form>标签，forms表示document对象中所有表单的集合，通过下标引用不同的表单，从0开始
var formElement = document.forms[0];
//提交表单，提交到action属性指定的地方
formElement.submit();
}
</script>
<title></title>
<script>
var ifEmail = false;
var ifPassword =false;
function checkName(){
var objEmail = $$("txtEmail");
if(objEmail.value.trim().length==0){
$$("spanInfo").innerHTML="*用户名不能为空";
}else{
var patterSpace =/\s+/;
if(patterSpace.test(objEmail.value.trim())){
$$("spanInfo").innerHTML="*输入的数据中间不能包含空格";
}else{
//检查输入的数据是否符合邮箱的要求
var regPattern =/^\w+@\w+\.((cn)|(com)|(com\.cn))$/;
if(regPattern.test(objEmail.value.trim())) {
ifEmail =true;
$$("spanInfo").innerHTML = "<img src=\"images/register_write_ok.gif\"/>";
}else{
$$("spanInfo").innerHTML="*输入的Email格式不对";
}
}
}
}
function $$(id){
return document.getElementById(id);
}
function checkAll(){
if(ifEmail){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<form name="form1" action="demo3.html">
用户的Email地址：<input type="text" onblur="checkName();" name="txtEmail" id="txtEmail"/><span id="spanInfo" style="color:red"></span><br>
<input type="submit" onclick="return checkAll();" value="提交注册"/>
</form>
（1）请求：浏览器以HTTP协议的方式提交请求到服务器
（2）响应：服务器以HTTP协议的方式响应内容到浏览器
注意：HTTP是WEB大众化非安全协议
HTTPS是WEB安全协议，是基于HTTP协议的，且加了一些加密等特殊功能，常用于在线支付，或者是需要安全性较高的网站中，例如：12306网站
HTTP请求有三个部份组成：请求行，请求头，请求体
HTTP响应有三个部份组成：响应行，响应头，响应体
（3）状态栏：有明显的进度条刷新现象，如果服务器响应较慢的话，进度条刷新也会变慢，IE9等中高版本浏览器，有明显转圈圈图标
（4）历史栏：会收集原来已访问过的web页面，进行缓存
（5）缺点：不需变化的大量数据，也全部刷新，造成浏览器加载和处理负担
（6）可改进的地方：让不需变化的大量数据，原封不动，不用缓存到历史栏中，无需全部刷新，只刷新某些需要变化的数据区域，例如：当前时间的区域
|
当前时间:<span>${requestScope.str}</span><br/> <input type="button" value="同步方式提交"/> |
|
<script type="text/javascript"> //定位button按钮，同时添加单击事件 document.getElementsByTagName("input")[0].onclick = function(){ var url = "${pageContext.request.contextPath}/TimeServlet?id="+new Date().getTime(); window.location.href = url; } </script> |
|
public class TimeServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { System.out.println("TimeServlet::doGet"); SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String str = sdf.format(new Date()); request.setAttribute("str",str); request.getRequestDispatcher("/06_time.jsp").forward(request,response); } } |
<script>
function checkAll(){
var UserName=$("input[name='UserName']").val();
var sur1="getA.action?UserName="+UserName+"";
$.get(sur1,function(date){
if(date=="重复命名"){
alert("不能使用当前命名");
}else{
alert("可以使用当前命名");
}
});
}
</script>
<body>
<input type="text" name="UserName" onclick="checkAll();">
</body>
public void gethtpp(String UserName,HttpServletResponse resp) throws IOException{
resp.setContentType("text/text;charset=GBK");
List<UserInfo> list =userInfoService.getList(null);
System.out.println(UserName);
for(UserInfo u : list) {
if(u.getUserName().equals(UserName)){
String result="重复命名";
PrintWriter pw=resp.getWriter();
pw.print(result);
break;
}else{
String result="不重复命名";
PrintWriter pw=resp.getWriter();
pw.print(result);
break;
}
}
}
<script>
function checkAll(){
$.ajax({
type: "GET",
url: "getA1.action",
data: {UserName:$("#UserName").val()},
dataType:"json",
success: function(data){
alert(data);ikhn
var da=data.rows[0].UserName;
alert(da);
}
});
}
</script>
<body>
<input type="text" name="UserName" id="UserName" onclick="checkAll();">
</body>
@RequestMapping(value="/getA1.action")
public void gethtpp1(String UserName,HttpServletResponse resp) throws IOException{
resp.setContentType("text/text;charset=GBK");
List<UserInfo> list =userInfoService.getList(null);
JSONArray jsonArray = JSONArray.fromObject(list);
String json=jsonArray.toString();
PrintWriter pw = resp.getWriter();
pw.print(json);
}
JavaScript增强AJAX基础的更多相关文章
- 【javascript】ajax 基础
什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...
- 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】
一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...
- Ajax基础--JavaScript实现
ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...
- 初识JavaScript，Ajax，jQuery，并比较三者关系
一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态 ...
- JavaScript、Ajax与jQuery的关系
简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...
- JavaScript、Ajax与jQuery的关系 分类： C1_HTML/JS/JQUERY 2014-07-31 10:15 3388人阅读 评论(0) 收藏
简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...
- 史上最全的Ajax基础详解
同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...
- 最新JavaScript、Ajax典藏级学习资料下载分类汇总 (2011年12月21日更新)
其他网站开发相关资料 超强HTML和xhtml,CSS精品学习资料下载汇总 最新htm ...
- Ajax基础知识《一》
对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...
随机推荐
- WCF全面解析学习（1）
SOA的基本概念和设计思想 SOA并不是仅仅采用Web服务的架构,Web服务只是一种实现SOA的理想技术手段.SOA依赖于开放的标准.SOA的一个目标是让不同的厂商开发的服务能够相互操作. SOA支持 ...
- AgileEAS.NET SOA 中间件平台.Net Socket通信框架-简单例子-实现简单的服务端客户端消息应答
一.AgileEAS.NET SOA中间件Socket/Tcp框架介绍 在文章AgileEAS.NET SOA 中间件平台Socket/Tcp通信框架介绍一文之中我们对AgileEAS.NET SOA ...
- 使用Lua脚本语言开发出高扩展性的系统，AgileEAS.NET SOA中间件Lua脚本引擎介绍
一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...
- [Unity3D]Unity+Android交互教程——让手机"动"起来
想要用Unity实现一个二维码扫描的功能,然后网上找插件,找到一个貌似叫EasyCodeScanner,但下载下来用用,真不好使,一导入运行就报错,调好错了再运行发现点按钮没反应,反复试了几遍发现还是 ...
- Visual Studio 2015 前瞻 属性初始化赋值！
通常我们建立属性的时候如果带初始化值的时候我们经常会这样处理. class MyClass { private string _name = "hello world!"; pub ...
- 【maven】maven创建web项目-pom文件提示web.xml is missing and <failOnMissingWebXml> is set to true
使用maven创建web项目,选择war类型后,pom文件红叉 提示web.xml is missing and <failOnMissingWebXml> is set to true ...
- one_person年轻的程序员
回顾大学三年,通过良师的教导和自身的刻苦学习,我已初步掌握如何运用计算机编程,也养成了认真对待学习和工作的好习惯! 在思想品德上,本人有良好道德修养,并有坚定的政治方向.我热爱祖国,热爱人民,遵纪守法 ...
- NOIp #2009
http://files.cnblogs.com/files/radiumlrb/NOIP2009%E6%8F%90%E9%AB%98%E7%BB%84%E5%A4%8D%E8%B5%9B%E8%AF ...
- CSS:文字不在图片中间
平时用的text-align属性比较多,相比较而言vertical-align则用的比较少. 当文字和图片布局在一起时,文字不能对齐到图片的中间,向这样: HTML: <div><i ...
- H.264的优势和主要特点
H.264,同时也是MPEG-4第十部分,是由ITU-T视频编码专家组(VCEG)和ISO/IEC动态图像专家组(MPEG)联合组成的联合视频组(JVT,Joint Video Team)提出的高度压 ...