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" οnblur="checkName();" name="txtEmail" id="txtEmail"/><span id="spanInfo" style="color:red"></span><br>
<input type="submit" οnclick="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" οnclick="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" οnclick="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);
}

 

 

 

 

 

转载于:https://www.cnblogs.com/kldsw/p/5911199.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值