javascript的ajax操作

1.异步的概念
    异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。
    传统单线程编程中，程序的运行是同步的
    同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行。
    异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。
    简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。
    异步就是从主线程发射一个子线程来完成任务。
    异步程序缺点：子线程脱离主线程控制，主线程不能判断子线程是否执行完毕，子线程的执行结果不能直接合并到主线程中。

2.什么时候用异步编程
    在前端编程中（甚至后端有时也是这样），我们在处理一些简短、快速的操作时，例如计算 1 + 1 的结果，往往在主线程中就可以完成。主线程作为一个线程，不能够同时接受多方面的请求。所以，当一个事件没有结束时，界面将无法处理其他请求。
    现在有一个按钮，如果我们设置它的 onclick 事件为一个死循环，那么当这个按钮按下，整个网页将失去响应。
    为了避免这种情况的发生，我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情，比如读取一个大文件或者发出一个网络请求。
    因为子线程独立于主线程，所以即使出现阻塞也不会影响主线程的运行。但是子线程有一个局限：一旦发射了以后就会与主线程失去同步，我们无法确定它的结束，如果结束之后需要处理一些事情，比如处理来自服务器的信息，我们是无法将它合并到主线程中去的。为了解决这个问题，JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

3.AJAX
    Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
    AJAX 不是新的编程语言，而是一种使用现有标准的实现异步编程的方法。
        AJAX是异步编程的手段
    AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
    AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

4.AJAX 工作原理
    在html网页中通过javascript触发某一个事件，创建XmlHttpRequest对象，通过XmlHttpRequest对象向服务器发送一个http请求，服务器接收到来自html网页的http请求，处理这个http请求，将http请求的处理结果，返回给浏览器端，由运行在浏览器上的javascript程序处理服务器返回的结果，显示在html网页。

5.AJAX实例

例如:html页面发送http请求到服务器，得到一组学生信息，将得到的学生信息显示在html页面的表格中。

5.1需要服务器程序提供一组学生信息。
1.安装配置开发工具
    1.安装JDK
    1.1下载安装包“jdk-8u162-windows-x64.exe”
    1.2创建安装目录java文件夹 , 在java文件夹下创建jdk8.0和jre8.0两个文件夹
    1.3双击安装包“jdk-8u162-windows-x64.exe”，注意切换jdk安装目录 和 jre安装目录 
    1.4 配置环境变量
        计算机---右键---属性----高级系统设置---高级---环境变量
        新建  JAVA_HOME  :  jdk安装目录[D:\java\jdk8.0]
        配置  Path  :  最前面 %JAVA_HOME%\bin;
        新建  CLASSPATH :  .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
    1.5测试  开始--cmd---命令提示行---java -version
C:\Users\Administrator>java -version
java version "1.8.0_162"
Java(TM) SE Runtime Environment (build 1.8.0_162-b12)
Java HotSpot(TM) 64-Bit Server VM (build 25.162-b12, mixed mode)

    2.安装eclipse
    2.1 下载安装包“eclipse-jee-neon-3-win32-x86_64.zip”
    2.2 指定位置解压缩
    2.3 指定文件夹用于保存后端程序
    2.4 双击安装目录中的eclipse.exe,选择保存后端处理程序的文件夹路径

    3.安装Maven
        Maven项目对象模型(POM)，可以通过一小段描述信息来管理项目的构建，报告和文档的项目管理工具软件。[项目管理工具]
        主要作用:帮助我们导入程序开发过程中的第三发开发工具类库
    3.1 下载安装包“apache-maven-3.6.3-bin.zip”
    3.2  指定位置解压缩
    3.3  修改Maven的中央仓库
        Maven的安装目录下----conf----settings.xml---<mirrors>元素
<mirror>
        <id>nexus-aliyun</id>
        <mirrorOf>*</mirrorOf>
        <name>Nexus aliyun</name>
        <url>http://maven.aliyun.com/nexus/content/groups/public</url>
</mirror>
    3.4. 建立本地仓库，Maven的安装目录下新建一个文件夹“localRepository”
    3.5. 配置本地仓库
        Maven的安装目录下----conf----settings.xml---
<localRepository>本地仓库文件夹的地址</localRepository>
例如:
<localRepository>F:\20220222\apache-maven-3.6.3\localRepository</localRepository>
    3.6 配置环境变量
        计算机---右键---属性----高级系统设置---高级---环境变量
        新建  MAVEN_HOME   ： maven的安装目录【F:\20210525\apache-maven-3.6.3】
        配置  Path  :  最后面  %MAVEN_HOME%\bin;

    3.7 测试Maven的配置 开始--cmd---命令提示行---mvn -version
C:\Users\Administrator>mvn -version
Apache Maven 3.8.4 (9b656c72d54e5bacbed989b64718c159fe39b537)
Maven home: F:\20210907\apache-maven-3.8.4
Java version: 1.8.0_162, vendor: Oracle Corporation, runtime: D:\java\jdk8.0\jre

Default locale: zh_CN, platform encoding: GBK
OS name: "windows 7", version: "6.1", arch: "amd64", family: "windows"

    4.eclipse集成Maven
    4.1 打开eclipse---window---preferences---Maven
    4.2 Maven---User Settings
        4.3 Maven---Installations---add
    Apply---OK

2.使用eclipse创建maven项目【javaweb项目】
    1.打开eclipse,选择项目保存路径
    2.File-->new -- > Maven Project
    3.选中 create  a simple  project
    4.GroupID:com.wangxing.test
      ArtifaceId: testproject
      Packageing : war 
    问题1：将testproject项目下的JRE System Library[J2SE-1.5],
        换成JRE System Library[JavaSE-1.8]
    解决方法:在项目中的pom.xml配置插件
<build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.6.0</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
        </plugins>  
  </build>
选中项目---右键---Maven---update project
    问题2：在testproject项目的pom.xml文件中有一个
        “web.xml is missing and <failOnMissingWebXml> is set to true”
    解决方法:在当前项目的src-->main-->webapp文件夹下创建WEB-INF文件夹；
        在WEB-INF文件夹中创建web.xml文件
web.xml文件中的内容
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  
</web-app>

    修改文本字体
    eclipse---window---preferences--输入font--Colors and Fonts---Basic--Text Font--Edit
    
    修改eclipse的字符编码
    eclipse---window---preferences--Ganeral---workspace--Text File Encding--other--utf-8

3.创建构造学生信息的java类
创建保存java类的程序包“src/main/java”--右键--->new--->other--->java---package
“com.wangxing.javabean”
选中“com.wangxing.javabean”---右键--->new--->other--->java--->Class---name:Student---finish
package com.wangxing.javabean;
public class Student {
    private int stuid;
    private String  stuname;
    private int  stuage;
    private String stuaddress;
    public  Student(int stuid,String  stuname,int  stuage,String stuaddress){
        this.stuid=stuid;
        this.stuname=stuname;
        this.stuage=stuage;
        this.stuaddress=stuaddress;
    }
    public int getStuid() {
        return stuid;
    }
    public void setStuid(int stuid) {
        this.stuid = stuid;
    }
    public String getStuname() {
        return stuname;
    }
    public void setStuname(String stuname) {
        this.stuname = stuname;
    }
    public int getStuage() {
        return stuage;
    }
    public void setStuage(int stuage) {
        this.stuage = stuage;
    }
    public String getStuaddress() {
        return stuaddress;
    }
    public void setStuaddress(String stuaddress) {
        this.stuaddress = stuaddress;
    }
}

4.在项目的pom.xml文件中配置servlet的依赖库，和gson的依赖库

<dependencies>
        <!-- 配置导入servlet的依赖库 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.0.1</version>
            <scope>provided</scope>
        </dependency>
        <!-- 配置导入gson的依赖库 -->
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.2</version>
        </dependency>
</dependencies>

5.编写请求处理程序
创建保存请求处理程序的程序包“src/main/java”--右键--->new--->other--->java---package
“com.wangxing.servlet”
选中“com.wangxing.servlet”---右键--->new--->other--->java--->Class---name:StudentServlet
package com.wangxing.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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

import com.google.gson.Gson;
import com.wangxing.javabean.Student;

public class StudentServlet extends HttpServlet{
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //创建学生信息对象【一组】
        Student stu1=new Student(1001,"zhangsan",23,"西安");
        Student stu2=new Student(1002,"lisisi",24,"北京");
        Student stu3=new Student(1003,"wangwu",25,"上海");
        //创建保存学生信息的集合
        List<Student> stulist=new ArrayList<Student>();
        //装学生信息对象到集合
        stulist.add(stu1);
        stulist.add(stu2);
        stulist.add(stu3);
        //将装有学生信息对象到集合转换成json字符串
        Gson gson=new Gson();
        String studentjson=gson.toJson(stulist);
        //设置请求对象/响应对象的字符编码
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        //创建输出流对象
        PrintWriter out=resp.getWriter();
        //写出json字符串
        out.write(studentjson);
        //关闭
        out.close();
    }
}

6.配置请求处理程序[src--main--webapp--WEB-INFO--web.xml]
<servlet>
      <servlet-name>student</servlet-name>
      <servlet-class>com.wangxing.servlet.StudentServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>student</servlet-name>
      <url-pattern>/getStudent</url-pattern>
 </servlet-mapping>

7.在pom.xml配置tomcat服务器插件[<plugins>中]
<!-- 配置Tomcat插件 -->
<plugin>
    <groupId>org.apache.tomcat.maven</groupId>
    <artifactId>tomcat7-maven-plugin</artifactId>
    <version>2.2</version>
    <configuration>
        <!-- 服务器访问端口号 -->
        <port>8080</port>
        <!--项目访问路径 -->
        <path>/</path>
        <!--服务器编码 -->
        <uriEncoding>UTF-8</uriEncoding>
    </configuration>
</plugin>
    
8.运行服务器
    项目---》右键--》run as ---》Maven  build---Goals：tomcat7:run

9.浏览器输入:http://localhost:8080/getStudent

[{"stuid":1001,"stuname":"zhangsan","stuage":23,"stuaddress":"瑗垮畨"},{"stuid":1002,"stuname":"lisisi","stuage":24,"stuaddress":"鍖椾含"},{"stuid":1003,"stuname":"wangwu","stuage":25,"stuaddress":"涓婃捣"}]