JavaScript，Ajax基础

时间 2020-12-27

标签 ajax 栏目 JavaScript 繁體版

原文原文链接

转载自这篇文章

JavaScript，Ajax基础

一）什么是JavaScript【以下简称JS】

JS是脚本语言

（1）基于对象

JS本身就有一些现成的对象可供程序员使用，例如：Array，Math，String。。。

JS并不排除你可以自已按一定的规则创建对象

（2）事件驱动

JS代码写好后，需要外界触发后，方可运行，例如：单击事件，定时执行，。。。

（3）解释性

每次运行JS代码时，得需要将原代码一行一行的解释执行

相对编译型语言（例如：Java、C++）执行速度相对较慢

（4）基于浏览器的动态交互网页技术

如果JS嵌入到HTML中，可以不需要服务器支持，直接由浏览器解释执行

如果JS嵌入到JSP或Servlet中，必需要服务器支持，直接由浏览器解释执行

（5）嵌入在HTML标签中

JS必须嵌入到一个名叫<script src="引入外部js文件"></script>的标签中，方可运行

注意：多个script块中的变量可以相互访问。

二）JS中的三种类型

（1）基本类型：number，string，boolean

number包含正数，负数，小数

string由''或""定界

boolean由true或false，但js中的boolean也包含更多情况，例如：存在表示true，不存在表示false

        var num = 100;  //num为number类型
        var str = "哈哈";//str为string类型
        var flag = false;//flag为boolean类型
        window.alert(num);
        window.alert(str);
        window.alert(flag);

（2）特殊类型：null，undefined

null表示一个变量指向null

undefined表示一个变量指向的值不确定

        var array = null;
        var student;  声明了，但是还没有赋值，为undefined
        alert(array);
        alert(student);
        if(student==undefined){  //判断是否为undefined

        }

（3）复合类型：函数，对象，数组

对象包含内置对象和自定义的对象

三）JS中有三种定义函数的方式参看JScript.chm文档

（1）正常方式：function mysum(num1,num2){return num1+num2;}

        function mysum(num1,num2){
            return num1 + num2;
        }
        var myresult = mysum(100,200);
        alert("myresult="+myresult);

（2）构造器方式：new Function("num1","num2","return num1+num2;")

        var youresult = new Function("num1","num2","return num1+num2");
        alert( youresult(1000,2000) );

（3）直接量或匿名或无名方式：var mysum = function(num1,num2){return num1+num2;}

 var theyresult = function(num1,num2){ return num1 + num2; }
        alert( theyresult(10000,20000) );

四）JS中有四种对象

（1）内置对象：Date，Math，String，Array，。。。

        var str = new Date().toLocaleString();
        window.document.write("<font size='44' color='red'>"+str+"</font>");

<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你好";JAVASCRIPT采用Unicode编码
        //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>

（2）自定义对象：Person，Card，。。。

       function Student(id,name,sal){
            //this指向s引用
            this.id = id;
            this.name = name;
            this.sal = sal;
        }
        var s = new Student(1,"波波",7000);
        document.write("编号:" + s.id + "<br/>");
        document.write("姓名:" + s.name + "<br/>");
        document.write("薪水:" + s.sal + "<br/>");

（3）浏览器对象： window，document，status，location，history。。。

        function myrefresh(){
            window.history.go(0);
        }

<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); 1 -1 表示前进，后退，0表示刷新 浏览器不停刷新，会有个圈圈在转。 </script>

（4）ActiveX对象：ActiveXObject("Microsoft.XMLHTTP")，。。。

五）演示JS对象的属性，方法和事件的使用

（1）window.location.href

            var url = "04_array.html";
            window.location.href = url;

（2）form.submit() 实现表单提交的功能

    <form action="/js-day01/04_array.html" method="POST">
        <input type="button" value="提交到服务端" onclick="doSubmit()"/>
    </form>

    <script type="text/javascript">
        function doSubmit(){
            //表单提交
            document.forms[0].submit();
        }
    </script>

<body>
    
    <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>
    
  </body>

（3）inputElement.onblur = 函数

（4）document.createElement(“img”)

（5）imgElement.style.width/height

六）回顾传统Web应用请求和响应特点【显示当前时间】

（1）请求：浏览器以HTTP协议的方式提交请求到服务器

（2）响应：服务器以HTTP协议的方式响应内容到浏览器

注意：HTTP是WEB大众化非安全协议

HTTPS是WEB安全协议，是基于HTTP协议的，且加了一些加密等特殊功能，常用于在线支付，或者是需要安全性较高的网站中，例如：12306网站

HTTP请求有三个部份组成：请求行，请求头，请求体

HTTP响应有三个部份组成：响应行，响应头，响应体

（3）状态栏：有明显的进度条刷新现象，如果服务器响应较慢的话，进度条刷新也会变慢，IE9等中高版本浏览器，有明显转圈圈图标

（4）历史栏：会收集原来已访问过的web页面，进行缓存可以前进，后退

（5）缺点：不需变化的大量数据，也全部刷新，造成浏览器加载和处理负担

（6）可改进的地方：让不需变化的大量数据，原封不动，不用缓存到历史栏中，无需全部刷新，只刷新某些需要变化的数据区域，例如：当前时间的区域

传统方式获取时间

jsp页面：

    
   当前时间:<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);
    }
}

七）什么是AJAX【Asynchronous异步的JS和XML】，工作原理与特点

（1）什么是同步：

请求1->响应1->请求2->响应2->

Web1.0时代

（2）什么是异步：

请求1->请求2->请求3->响应1->响应2->响应3->

请求1->响应1->请求2->请求3->响应2->响应3->

Web2.0时代

项目中：Web1.0为主（整个浏览器刷新），Web2.0为辅（浏览器局部刷新）

（3）什么是AJAX

客户端（特指PC浏览器）与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术

即，AJAX是一个【局部刷新】的【异步】通讯技术

AJAX不是全新的语言，是2005年Google公司推出的一种全新【编程模式】，不是新的编程语言

（4）不用刷新整个页面便可与服务器通讯的办法有：

（A）Flash/ActionScript

（B）框架Frameset

（C）iFrame（内嵌入框架)

（D）XMLHttpRequest(非IE浏览器)和ActiveXObject(IE浏览器)

背景：早上IE5时，微软就开发出了第一个异步通讯对象，叫ActiveXObject对象，

Firefox等其它浏览器厂商也慢慢引入异步通讯对象，叫XMLHttpRequest对象，

IE的高版本，也将这个异步对象取名叫XMLHttpRequest对象，但IE有向下兼容问题，

也可以使用ActiveXObject对象。

无需第三方jar包，现代中高版本浏览器中内置了这个异步通讯对象，只需通过JavaScript就可以创建

注意：所有浏览器中都内置了异步对象，在默认情况下，该异步对象并没有创建出来

function createAJAX(){
    var ajax = null;
    try{
        ajax = new ActiveXObject("microsoft.xmlhttp");
    }catch(e1){
        ajax = new XMLHttpRequest();
    }
    return ajax;
}

（5）AJAX工作原理

参见<<AJAX工作原理.JPG>>

（6）AJAX包含的技术

参见<<AJAX包含的技术.JPG>>

（7）AJAX开发步骤

步一：创建AJAX异步对象，例如：createAJAX()

步二：准备发送异步请求，例如：ajax.open(method,url)

步三：如果是POST请求的话，一定要设置AJAX请求头，例如：ajax.setRequestHeader()

如果是GET请求的话，无需设置设置AJAX请求头

步四：真正发送请求体中的数据到服务器，例如：ajax.send()

步五：AJAX不断的监听服务端响应的状态变化，例如：ajax.onreadystatechange，后面写一个无名处理函数

步六：在无名处理函数中，获取AJAX的数据后，按照DOM规则，用JS语言来操作Web页面

（8）AJAX适合用在什么地方

AJAX【适合】不用来传递大量数据，而只用来【传递少量数据】，在用户的【体验】上，【更加人性化】

AJAX是一个和服务器无关的技术，即服务器可使用：JavaEE，.NET，PHP，。。。这些技术都可

AJAX只管向服务器发送请求，同时只管接收服务器的HTML或XML或JSON载体响应

服务端不能使用转发或重定向到web页面，因为这样会起浏览器全面刷新

即只能以流的方式响应给浏览器

AJAX开发步骤

步一：创建AJAX异步对象，例如：createAJAX()

步二：准备发送异步请求，例如：ajax.open(method,url)

步三：如果是POST请求的话，一定要设置AJAX请求头，例如：ajax.setRequestHeader()

如果是GET请求的话，无需设置设置AJAX请求头

步四：真正发送请求体中的数据到服务器，例如：ajax.send()

步五：AJAX不断的监听服务端响应的状态变化，例如：ajax.onreadystatechange，后面写一个无名处理函数

步六：在无名处理函数中，获取AJAX的数据后，按照DOM规则，用JS语言来操作Web页面（通过io流输出数据，而不是转发和重定向了）

八）AJAX应用

（1）无需刷新整个Web页面显示服务器响应的当前时间（text/html;charset=UTF-8）

jsp页面：

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>无需刷新整个Web页面显示服务器响应的当前时间</title>
  </head>
  <body>
    
    当前时间：<span id="time"></span><br/>
    <input id="buttonID" type="button" value="获取当前时间"/><p/>
    
    
    <script type="text/javascript">
        //创建AJAX异步对象
        function createAJAX(){
            var ajax = null;
            try{
                //如果IE5~IE12的话  
                ajax = new ActiveXObject("microsoft.xmlhttp");
            }catch(e1){
                try{
                    //如果是非IE的话
                    ajax = new XMLHttpRequest();
                }catch(e2){
                    alert("你的浏览器中不支持异步对象，请换浏览器");
                }
            }
            return ajax;
        }
    </script>

    <script type="text/javascript">
        document.getElementById("buttonID").onclick = function(){
            //NO1)创建AJAX异步对象
            var ajax = createAJAX(); //NO2)准备发送请求
            var method = "GET";
            var url = "${pageContext.request.contextPath}/AjaxTimeServlet?time=" + new Date().getTime();//如果不加时间，ie浏览器会认为url没变化，不再向服务器发请求，firefox是会发请求的。所以为了兼容性，一般会加时间，每次都发送请求。
            ajax.open(method,url);
            //NO3)真正发送请求体的数据到服务器，如果请求体中无数据的话，就用null表示
            ajax.send(null);
            
            //-------------------------------------------------------------等待
        
            //NO4)AJAX异步对象不断监听服务器响应的状态0-1-2-3-【4】
            //一定要状态变化后，才可触发function(){}函数
            //如果状态永远是4-4-4-4-4，是不会触发function(){}函数的
            ajax.onreadystatechange = function(){ //如果状态码为4的话
                if(ajax.readyState == 4){
                    //如果响应码为200的话
                    if(ajax.status == 200){
                        //NO5)从AJAX异步对象中获取服务器响应的HTML数据（怎么知道服务端发送过来的是html数据呢，可以在服务端设置，参见下面的服务端代码）
                        var nowStr = ajax.responseText;
                        
                        //NO6)将结果按照DOM规则，动态添加到web页面指定的标签中
                        var spanElement = document.getElementById("time");
                        spanElement.innerHTML = nowStr;
                    }
                }
            } 
            
        }
    </script>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
  </body>
</html>

public class TimeServletAjax extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String str = sdf.format(new Date());
        //注意：在Web2.0时代，即异步方式下，不能用转发或重定向
        //因为：转发或重定向会引起浏览器全部刷新，而不是局部刷新
        //所以得用以输出流的方式将服务器的结果输出给异步对象，然后输出到浏览器
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(str);
        pw.flush();
        pw.close();
    }
}

（2）基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在（text/html;charset=UTF-8）

Get方式

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title>
  </head>
  <body>
    
    <form>
        用户名[GET]：<input id="usernameID" type="text" name="username" maxlength="4"/>
        光标移出后，立即检查结果
    </form>
    <hr/>
    <span id="resID"></span>
    
    <script type="text/javascript">
        //创建AJAX异步对象，即XMLHttpRequest
        function createAJAX(){
            var ajax = null;
            try{
                ajax = new ActiveXObject("microsoft.xmlhttp");
            }catch(e1){
                try{
                    ajax = new XMLHttpRequest();
                }catch(e2){
                    alert("你的浏览器不支持ajax，请更换浏览器");
                }
            }
            return ajax;
        }
    </script>
    
    
    <script type="text/javascript">
        //定位文本框，同时提供焦点失去事件
        document.getElementById("usernameID").onblur = function(){
            //获取文本框中输入的值
            var username = this.value; //如果用户没有填内容
            if(username.length == 0){
                //提示 
                document.getElementById("resID").innerHTML = "用户名必填";
            }else{
                //对汉字进行UTF-8(U8)的编码
 username = encodeURI(username); 注意：get方式中，参数有中文要用encodeuri编码，post方式要设置请求头。 //NO1)
                var ajax = createAJAX();
                //NO2)
                var method = "GET";
                var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username;
                ajax.open(method,url);
                //NO3)
                ajax.send(null);
                
                //--------------------------------------------------------等待
                
                //NO4)
                ajax.onreadystatechange = function(){
                    if(ajax.readyState == 4){
                        if(ajax.status == 200){
                            //NO5)
                            var tip = ajax.responseText;
                            //NO6)
                            document.getElementById("resID").innerHTML = tip;
                        }
                    }
                }
            }
        }
    </script>
    
  </body>
</html>

package cn.itcast.javaee.js.user;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在 
 * @author AdminTC
 */
public class UserServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        String username = request.getParameter("username");
        byte[] buf = username.getBytes("ISO8859-1"); username = new String(buf,"UTF-8");
        System.out.println("username=" + username);
        String tip = "<font color='green'>可以注册</font>";
        if("杰克".equals(username)){
            tip = "<font color='red'>该用户已存在</font>";
        }
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(tip);
        pw.flush();
        pw.close();
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        String username = request.getParameter("username");
        System.out.println("username=" + username);
        
        String tip = "images/MsgSent.gif";
        if("杰克".equals(username)){
            tip = "images/MsgError.gif";
        }
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(tip);
        pw.flush();
        pw.close();
    }
}

POST方式：注意：ajax默认的请求方式是get，为post方式时，必须设置请求头，否则会错误，

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title>
    <!-- 引入外部js文本 -->
    <script type="text/javascript" src="js/ajax.js"></script>
  </head>
  <body>
    
    
    用户名[POST]：<input id="usernameID" type="text" maxlength="4"/>
    <span id="resID">
        <!-- 
        <img src="tip变量" width="12px" height="12px"/>
        -->
    </span>
    
    
    <hr/>

    
    <script type="text/javascript">
        document.getElementById("usernameID").onblur = function(){
            var username = this.value;//杰克
            //NO1)
            var ajax = createAJAX();
            //NO2)
            var method = "POST";
            var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();
            ajax.open(method,url);
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title>
    <!-- 引入外部js文本 -->
    <script type="text/javascript" src="js/ajax.js"></script>
  </head>
  <body>
    
    
    用户名[POST]：<input id="usernameID" type="text" maxlength="4"/>
    <span id="resID">
        <!-- 
        <img src="tip变量" width="12px" height="12px"/>
        -->
    </span>
    
    
    <hr/>

    
    <script type="text/javascript">
        document.getElementById("usernameID").onblur = function(){
            var username = this.value;//杰克
            //NO1)
            var ajax = createAJAX();
            //NO2)
            var method = "POST";
            var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();
            ajax.open(method,url);
            //注意：ajax默认的请求方式是get，为post方式时，必须设置如下请求头，否则会错误，设置AJAX请求头为POST，他会将请求体中的汉字自动进行UTF-8的编码
 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); 固定的写法，post请求时必须写，且必须放在open与send之间。 //NO3)
            var content = "username=" + username;
            ajax.send(content);
            
            
            //===========================================等待
            
            
            //NO4)
            ajax.onreadystatechange = function(){
                if(ajax.readyState == 4){
                    if(ajax.status == 200){
                        //NO5)
                        var src="js/ajax.js"></script>
  </head>
  <body>
    
    
    用户名[POST]：<input id="usernameID" type="text" maxlength="4"/>
    <span id="resID">
        <!-- 
        <img src="tip变量" width="12px" height="12px"/>
        -->
    </span>
    
    
    <hr/>

    
    <script type="text/javascript">
        document.getElementById("usernameID").onblur = function(){
            var username = this.value;//杰克
            //NO1)
            var ajax = createAJAX();
            //NO2)
            var method = "POST";
            var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();
            ajax.open(method,url);
            //注意：ajax默认的请求方式是get，为post方式时，必须设置如下请求头，否则会错误，设置AJAX请求头为POST，他会将请求体中的汉字自动进行UTF-8的编码
 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); 固定的写法，post请求时必须写，且必须放在open与send之间。 //NO3)
            var content = "username=" + username;
            ajax.send(content);
            
            
            //===========================================等待
            
            
            //NO4)
            ajax.onreadystatechange = function(){
                if(ajax.readyState == 4){
                    if(ajax.status == 200){
                        //NO5)
                        var tip = ajax.responseText;
                    
                        //NO4)
            ajax.onreadystatechange = function(){
                if(ajax.readyState == 4){
                    if