zoukankan      html  css  js  c++  java
  • 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);
    }

  • 相关阅读:
    关于闹钟的题
    【历史】- UNIX发展史(BSD,GNU,linux)
    使用EF操作Mysql数据库中文变问号的解决方案
    javascript方法的方法名慎用close
    使用VS2013 + EF6 + .NET4.5 连接Mysql数据库
    ADO.NET生成的数据库连接字符串解析
    在WebBrowser控件使用js调用C#方法
    Mysql数据库之auto_increment
    Visual Studio插件Resharper 2016.1 及以上版本激活方法【亲测有效】
    Windows下Mysql5.7开启binlog步骤及注意事项
  • 原文地址:https://www.cnblogs.com/kldsw/p/5911199.html
Copyright © 2011-2022 走看看