后端开发基础-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

Ajax示例1

<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

Ajax示例1

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

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


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

οnblur=“sendRequest2()”>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值