作者：王素维060615 | 来源：互联网 | 2023-09-25 12:09
今天从头复习了一下ajax&＃xff0c;写个demo增强一下印象&＃xff0c;顺便记录一下遇到的一些问题。
1、什么是ajax&＃xff1f;
ajax&＃61; Asynchronous Javascript and XML&＃xff08;异步的 Javascript 和 XML&＃xff09;。它是一种在无需重新加载整个网页的情况下&＃xff0c;能够更新部分网页的技术。
2、怎么使用ajax&＃xff1f;
工具&＃xff1a;chrome浏览器、tomcat服务器
启动tomcat服务器
打开tomcat里面bin目录下的startup.bat文件&＃xff0c;启动tomcat服务器。&＃xff08;检查tomcat是否启动只要在浏览器里输入localhost:8080&＃xff0c;按回车访问&＃xff0c;若出现下图则成功启动。&＃xff09;
创建需要利用ajax访问的文件以及文件内容
该文件可以是任何类型&＃xff0c;比如 .txt和.js或者.xml。我现在在tomcat里面的webapps下面的ROOT路径里面新建一个txt1.txt&＃xff0c;里面的内容写一个json格式的数据&＃xff1a;{“name”:”aa”,”age”:25}&＃xff0c;记得另存为utf-8的格式&＃xff0c;否则好像会乱码。
- 创建ajax请求文件
注意&＃xff1a;这里有一个坑&＃xff0c;如果我在本地新建的ajax请求文件&＃xff0c;在Firefox浏览器下面运行是可以访问到数据的&＃xff0c;但是chrome浏览器有本地跨域的限制&＃xff0c;需要在同一个域下面访问&＃xff0c;所以必须也在tomcat里面的webapps下面的ROOT路径里面新建一个ajaxDemo.html&＃xff0c;这样就不会遇到跨域问题&＃xff08;其实跨域也有很多方式解决&＃xff09;。
ajaxDemo.html里面的内容如下&＃xff1a;
<html>
<head><title>ajax demotitle><meta charset&＃61;"utf-8">
head>
<body>
<div id&＃61;"myDiv1">div><div id&＃61;"myDiv">div><button type&＃61;"button" onclick&＃61;"loadXMLDoc()">请求数据button>
<script type&＃61;"text/Javascript">var a &＃61; 1;var id &＃61; setInterval(function(){document.getElementById("myDiv1").innerHTML&＃61;a;a&＃43;&＃61;1;},0);function loadXMLDoc(){
xmlhttp.onreadystatechange&＃61;function(){ if (xmlhttp.readyState&＃61;&＃61;4 && xmlhttp.status&＃61;&＃61;200){document.getElementById("myDiv").innerHTML&＃61;xmlhttp.responseText;}}xmlhttp.open("GET","txt1.txt",true);xmlhttp.send(null);}
script>
body>
html>
这样当你通过localhost:8080/ajaxDemo访问的时候也有一个一直增加的计数器和一个button&＃xff0c;点击button就可以利用ajax访问到txt1.txt文件里面的json格式的数据。结果如下图所示&＃xff1a;
京公网安备 11010802041100号