后端开发基础-Ajax学习-001——简介与使用

【一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义】

**开源地址：https://docs.qq.com/doc/DSmxTbFJ1cmN1R2dB **

package com.servlet;

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;

public class HelloServlet extends HttpServlet{

@Override

protected void service(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

System.out.println(“进入HelloServlet…”);

//响应输出一个text字符串信息

PrintWriter out = response.getWriter();

out.print(“Hello Ajax”);

out.close();

}

}

demo1.html

<input type=“button” id=“btn1”

οnclick=“sendRequest1();” value=“发送Ajax请求1”>

启动Tomcat 运行 ajaxcase-day01工程， 录入请求http://localhost:8088/ajaxcase-day01/demo1.html

---

=======================

任务一：重新实现hello.do案例

发送Ajax请求后,将返回的信息,显示到一个span中

任务二：用户名是否可用检测

发送请求时机:用户焦点离开输入框触发Ajax请求发送

发送请求:open(“get”,“check.do?name=输入框值”,true)

send(null);

Servlet逻辑：获取请求参数name的值;

然后判断name是否等于scott;

如果等于scott返回"用户名被占用";

否则返回"用户名可用";

回调处理：将消息显示到span中提示

任务三：加载特定格式字符串的对应处理方式

上面案例演示的是 get方式请求，任务二 演示的是post请求方式

下面通过完成上面三个任务依次演示：

案例参考思路

##补充:如何发送post请求

xhr.open(“post”,“check.do”,true);

xhr.setRequestHeader(“content-type”,

“application/x-www-form-urlencoded”);

xhr.send(“name=”+name);

##补充:post请求提交的中文乱码

request.setCharacterEncoding(“utf-8”);

String name = request.getParameter(“name”);

##案例：动态生成元素的option列表

###发送Ajax请求

-页面一出来就自动发送Ajax请求（onload事件）

-请求地址:/loadcites.do

###服务器端处理

/loadcities.do–>LoadCityServlet–>返回一个字符串

“1:北京;2:上海;3:深圳”

ID NAME

1 北京

2 上海

3 深圳

###Ajax回调处理

-解析"1:北京;2:上海;3:深圳"消息

-将解析出的id和name构建一个

北京

var opt = new Option(name,id);

-将option添加到元素里

web.xml

<?xml version="1.0" encoding="UTF-8"?>

ajaxcase-day01

index.html

index.htm

index.jsp

default.html

default.htm

default.jsp

helloServlet

com.servlet.HelloServlet

helloServlet

/hello.do

checkservlet

com.servlet.CheckServlet

checkservlet

/check.do

loadcityservlet

com.servlet.LoadCityServlet

loadcityservlet

/loadcities.do

demo1.html

<input type=“button” id=“btn1”

οnclick=“sendRequest1();” value=“发送Ajax请求1”>

---

用户名：<input type=“text” id=“name”

οnblur=“sendRequest2()”>

---