Web 基础29 AJAX入门及其案例

1.1 AJAX的概述

1.1.1概述

• AJAX是异步的JS和XML，
• AJAX并不是一种新的编程语言，AJAX是一种使用了现有标准的新方法，
• AJAX是一种JS与WEB服务器交互的技术，
• AJAX可以让页面在不需要重新加载的情况下，实现页面内容的更新。
• AJAX 分开就是 ---异步 js and xml
• 异步:开了一个线程,然后去发送请求,在这个请求回来之前,我该做什么做什么

1.1.2 学习AJAX必须掌握

• HTML
• CSS
• JS/DOM/jQuery

1.1.3 作用

• 动态的加载数据,按需取得数据
  • 树形结构
  • 联动菜单
  • 地图
• 改善用户体验
  • 输入内容会有提示(百度) 带进度条的文件上传(插件) 注册页面
• 电子商务的应用
  • 购物车

1.2 同步和异步的区别

同步异步的区别.png

1.3 AJAX的入门案例

  我对AJAX的底层原理没有了解，这里只能肤浅的讲解一下使用步骤

1.3.1 这里我先给一个入门案例，看着备注就明白使用步骤了

• 在JSP页面直接写

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>









    
 
    

来来来 我总结一下

  一共四个步骤

• 创建请求对象
• 设置请求状态变化时所触发的事件
• 创建连接
• 发送请求
• onreadystatechange
  • 就是一个属性,
  • 后面跟一个匿名的函数,
  • 关键匿名的函数什么时候调用,关键(状态改变)

• xmlHttp.readyState 相当于属性readyState的值

值	描述
0	连接未创建
1	连接已经创建
2	请求已接收
3	请求处理中
4	请求处理完成，响应已经就绪

• 下面我举个例子

4种状态  让班花帮忙买水
刚开始 忙自己的事  状态0
叫 一声班花 四目相对  建立连接 状态1
我说 买瓶水  状态2
穿好衣服  打扮好 状态3
买水回来 推门进来  状态4 
只关心回来的时候
买到 响应为 200 

1.4 AJAX提交数据至服务器

这里直接修改上面的代码

• 首先get 请求 先写个客户端

//get请求
xmlHttp.open("GET","/myAJAX/AJAX2Servlet?username=张三&password=123456",true);//直接在URL里面提交
xmlHttp.send();

• 客户端 servlet

String username = request.getParameter("username");
String password = request.getParameter("password");
response.getWrite().println(username+"="+password);//ajax直接接受这里输出的字符串

• 然后是 post请求

post请求是要写要给form的

 
//这样就足够了不用写 action 我试了一下不行，因为个连接已经交给ajax 这里不需要你操作了 
//enctype 这个很重要，要和ajax的统一

post请求

xmlHttp.open("POST","/myAJAX/AJAX2Servlet",true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//设置编码类型
xmlHttp.send("username=李四&password=qwerty");//发送请求

• 总结一下几个常我会写错的点
  • 请求方式
  • 请求资源路径
  • 请求的参数
  • 回调函数(匿名函数)

1.5 AJAX提交获取数据的乱码处理

  对于乱码问题，其实已经遇到很多次了，其实都可以在过滤器里面一次性解决那我还是，总结一下乱码的问题吧。

• 客户端提交数据包含中文,服务器端获取出来是的乱码

  • get请求

    • 原因:

      • 客户端提交数据:UTF-8 --- url编码 %ED%SD
      • 服务器获取数据:url解码---ISO-8859-1

    • 处理方式:

      • String username = new String(request.getParameter("username").getBytes("ISO-8859-1"),"UTF-8");

  • post请求

    • 原因:

      • 客户端提交数据:UTF-8
      • 服务器获取数据:ISO-8859-1

    • 处理方式:

      • request.setCharacterEncoding("UTF-8");

• 服务器端发送数据中包含中文, 客户端(浏览器)获取出来的是乱码

  • 原因:

    • 服务器提交数据:ISO-8859-1
    • 客户端获取数据:UTF-8

  • 处理方式:

    • response.setContentType("text/html;charset=UTF-8");

• 总结:不管是什么客户端,只要以http协议提交数据,我们获取乱码的处理方式是一样的，Filter统一解决

1.6 校验用户名是否重复（环境搭建）

1.6.1 步骤

• 导包
• 导入工具库
• 创建数据库和表
• 修改配置

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>








    
注册页面
    

        用户名：
        

        密码：