网站开发招标网,平台公司331名单,新手学做网站72小时精选,建设c2c网站需要多少投资1 什么是ajax AJAX Asynchronous JavaScript and XML#xff08;异步的 JavaScript 和 XML#xff09;。 AJAX 不是新的编程语言#xff0c;而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下#xff0c;可以与服务器交换数据并更新部分网…1 什么是ajax AJAX Asynchronous JavaScript and XML异步的 JavaScript 和 XML。 AJAX 不是新的编程语言而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件但需要用户允许 JavaScript 在浏览器上执行。 XMLHttpRequest 只是实现 Ajax 的一种方式。
ajax工作原理 简单来说,我们之前发的请求通过类似 form表单标签,a标签 这种方式,现在通过 运行js代码动态决定什么时候发送什么样的请求 通过运行JS代码发送的请求浏览器可以不用跳转页面 ,我们可以在JS代码中决定是否要跳转页面 通过运行JS代码发送的请求,接收到返回结果后,我们可以将结果通过dom编程渲染到页面的某些元素上,实现局部更新
HTML 页面
1. DOCTYPE html
这定义了文档类型和版本告诉浏览器这是一个 HTML5 文档。
2. html langen
这定义了 HTML 文档的根元素并设置文档的语言为英语en。
3. head
这是文档的头部包含了元数据如字符编码和标题以及脚本如 JavaScript。
meta charsetUTF-8定义文档使用的字符编码为 UTF-8。titleTitle/title设置网页的标题为“Title”。
4. script
这定义了一个 JavaScript 函数 getMessage。
函数内部首先创建了一个新的 XMLHttpRequest 对象用于发送异步请求。设置 onreadystatechange 回调函数当请求的状态发生变化时执行。在回调函数中检查请求是否完成readyState 4且响应状态码为 200表示成功。如果请求成功将响应的文本内容打印到控制台并将其设置为具有 idmessage 的输入元素的值。使用 request.open 方法设置请求方法和 URL/hello?usernamezhangsan。使用 request.send 方法发送请求。
5. body
这是文档的主体部分。
button onclickgetMessage()按钮/button定义一个按钮当点击时调用 getMessage 函数。input typetext idmessage/定义一个文本输入框其 id 为 message用于显示从服务器获取的消息。
index.html:
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescriptfunction getMessage(){//实例化一个xmlHttpRequestvar request new XMLHttpRequest();//设置xmlHttpRequest对象的回调函数request.onreadystatechange function (){if(request.readyState 4 request.status 200){console.log(request.responseText)var inputEle document.getElementById(message)inputEle.valuerequest.responseText}}//设置发送请求的方式和请求的资源路径request.open(GET,/hello?usernamezhangsan)//发送请求request.send();}/script
/head
body
button onclickgetMessage()按钮/button
input typetext idmessage/
/body
/html
Java Servlet
1. WebServlet(/hello)
这是一个注解表示这个 Servlet 响应的 URL 路径为 /hello。
2. public class HelloServlet extends HttpServlet
定义了一个名为 HelloServlet 的类它继承了 HttpServlet。
3. service 方法
重写了 service 方法来处理 HTTP 请求。
从请求中获取名为 username 的参数。使用响应的 writer 将 hello 和用户名拼接后的字符串写回给客户端。
HelloServlet.java
WebServlet(/hello)
public class HelloServlet extends HttpServlet {Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username req.getParameter(username);resp.getWriter().write(hellousername);}
}总结 当用户在 HTML 页面上点击按钮时JavaScript 函数 getMessage 会被调用该函数会向服务器发送一个 GET 请求到 /hello?usernamezhangsan。服务器上的 HelloServlet 会处理这个请求并返回 hellozhangsan 字符串。然后JavaScript 会将这个字符串设置到 ID 为 message 的输入框中。
这样用户就可以在输入框中看到从服务器返回的消息了。
