ajax java web_Java Web Server(3): Ajax

最新推荐文章于 2024-09-15 16:13:56 发布

猫眼看熏肉

最新推荐文章于 2024-09-15 16:13:56 发布

阅读量45

点赞数

文章标签： ajax java web

本文链接：https://blog.csdn.net/weixin_30839665/article/details/114065698

版权

我们上节课讲了一下JSP，大家掌握其中的思想就好了。至于JSP的更多知识，现在其实已经没有用了，因为直接使用JSP做web开发已经不会再有人用了。这是古代的编程知识。

关于服务端的知识，我们先暂停一下，从http协议的角度去学习一个前端知识。在前端技术中，有一个非常重要的技术，叫做 ajax。我们先展示一个 ajax 的例子，再去看一下这个技术的实质。

AJAX用例

在很多应用中，我们其实不想去刷新整个网页，比如，一个网页上有很多商品的图片列表，当我们把鼠标移上去，想在网页上弹出一个小框，框里显示了这个商品的详细情况。在这个场景中，我们其实不需要刷新整个网页。但是如何能再向服务端发请求，从而获得某个商品的详细情况呢？

这时候，就出现一种名为Ajax的技术。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下，可以与服务端进行数据交互。

我们还是在 jetty 的 root 目录下，新建一个名为ajax.html的文件：

function loadXMLDoc() {

var xmlhttp;

xmlhttp=new XMLHttpRequest();

// 当数据返回以后才会调用这个匿名方法，把从服务端得到的内容设置到myDiv这个标签里xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

xmlhttp.open("GET","ajax_info.txt",true);

xmlhttp.send();

}

使用 AJAX 修改文本内容

change text

注意新建文件的时候，一定要保证文件的编码为UTF-8

我们来分析一下，这个网页上的 javascript 代码是啥意思。在这个网页上有一个button，当点击这个 button 的时候，就会调用 loadXMLDoc。在这个方法里，创建了一个XMLHttpRequest，通过这个对象的open方法，访问了服务端的 ajax_info.txt，当数据返回的时候，就会调用一个匿名函数，来设置网页内容。注意看一下上面代码中的注释。

所以我们在服务端再创建一个名为 ajax_info.txt 的文件，文件内容可以随便填写。

点击了以后，就可以看到：

HTTP报文

我们看一下，使用AJAX的时候，浏览器到底干了啥：

GET /ajax_info.txt HTTP/1.1

Host: localhost:8080

Connection: keep-alive

User-Agent: Mozilla/5.0(WindowsNT10.0;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/56.0.2924.18Safari/537.36

Accept: */*

Referer: http://localhost:8080/ajax.html

Accept-Encoding: gzip,deflate,sdch,br

Accept-Language: zh-CN,zh;q=0.8