ajax从服务端获取数据(服务端返回html、xml)

╰+攻爆jí腚メ 2022-11-29 08:13 162阅读 0赞

> **ajax的本质就是，发送http请求的工作交给js中的XMLHttpRequest对象去做！**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 9][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 11][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>ajax知识</title>
    <link rel="stylesheet" type="text/css" href="../css/body.css" />
    <link rel="stylesheet" type="text/css" href="../css/mark.css" />
    <link rel="stylesheet" type="text/css" href="../css/input2.css" />
    <link rel="stylesheet" type="text/css" href="../css/console.css" />
    </head>
    <body>
    <h1>ajax知识</h1>
    <h3>ajax的本质就是，发送http请求的工作交给js中的XMLHttpRequest对象去做</h3>
    <input type="button" id="input1" value="ajax获取服务端新闻，返回html"/>
    <br /><br />
    <input type="button" id="input2" value="测试当一个元素绑定2个点击事件时,会执行哪个？" onclick="test1();"/>
    <br /><br />
    <input type="button" id="input3" value="ajax获取服务端数据，返回xml"/> 
    <br /><br />
    <input type="button" id="input4" value="ajax获取服务端数据，返回xml格式"/> 
    <br /><br />
    <ul></ul>
    <ul></ul>
    <ul></ul>
    </body>
    <script type="text/javascript">
    document.getElementById('input2').onclick = function() {
    	//当一个元素绑定2个点击事件时，会执行这个
    	alert('hi'); 
    }
    
    //
    function test1(){
    	//当一个元素绑定2个点击事件时，这个不会执行
    	alert('hello');
    }
    
    //
    document.getElementById('input1').onclick = function() {
    	var xhr = new XMLHttpRequest();
    	xhr.onreadystatechange = function() {
    		if(this.readyState == 4 && this.status == 200){
    			console.log('服务端返回的内容：' + this.responseText);
    			document.getElementsByTagName('ul')[0].innerHTML = this.responseText;
    			}
    		}
    	var url = '/ajax/ajaxNewsList';
    	xhr.open('get', url, true);
    	xhr.send(null);
    }
    
    //
    document.getElementById('input3').onclick = function() {
    	var xhr = new XMLHttpRequest();
    	xhr.onreadystatechange = function() {
    		if(this.readyState == 4 && this.status == 200){
    			console.log('服务端返回的内容：' + this.responseText);
    			console.log('服务端返回的内容：' + this.responseXML);
    // 			alert(this.responseXML);
    			var obj = this.responseXML;
    			var rootNode = obj.getElementsByTagName('books')[0];
    // 			var rootNode = obj.childNodes[0];
    			console.log(rootNode);
    			var allBook = rootNode.getElementsByTagName('book');
    			console.log(allBook, allBook.length);
    			var str = '';
    			for (var index = 0; index < allBook.length; index++) {
    					var bookNode = allBook[index];
    					console.log(bookNode, bookNode.innerHTML);
    					console.log(bookNode.getElementsByTagName('name')[0].innerHTML);
    					console.log(bookNode.getElementsByTagName('author')[0].innerHTML);
    					var bookName = bookNode.getElementsByTagName('name')[0].childNodes[0].nodeValue;
    					var bookAuthor = bookNode.getElementsByTagName('author')[0].childNodes[0].nodeValue;
    					console.log(bookName, bookAuthor);
    					str += '<li>' + bookName +  '-' + bookAuthor +'</li>'
    				}
    			document.getElementsByTagName('ul')[1].innerHTML = str;
    			}
    		}
    	var url = '/ajax/ajaxXml';
    	xhr.open('get', url, true);
    	xhr.send(null);
    }
    
    //
    document.getElementById('input4').onclick = function() {
    	var xhr = new XMLHttpRequest();
    	xhr.onreadystatechange = function() {
    		if(this.readyState == 4 && this.status == 200){
    			console.log('服务端返回的内容：' + this.responseText);
    			console.log('服务端返回的内容：' + this.responseXML);
    // 			alert(this.responseXML);
    			var obj = this.responseXML;
    			var rootNode = obj.getElementsByTagName('books')[0];
    // 			var rootNode = obj.childNodes[0];
    			console.log(rootNode);
    			var allBook = rootNode.getElementsByTagName('book');
    			console.log(allBook, allBook.length);
    			var str = '';
    			for (var index = 0; index < allBook.length; index++) {
    					var bookNode = allBook[index];
    					console.log(bookNode, bookNode.innerHTML);
    					console.log(bookNode.getElementsByTagName('name')[0].innerHTML);
    					console.log(bookNode.getElementsByTagName('author')[0].innerHTML);
    					var bookName = bookNode.getElementsByTagName('name')[0].childNodes[0].nodeValue;
    					var bookAuthor = bookNode.getElementsByTagName('author')[0].childNodes[0].nodeValue;
    					console.log(bookName, bookAuthor);
    					str += '<li>' + bookName +  '-' + bookAuthor +'</li>'
    				}
    			document.getElementsByTagName('ul')[2].innerHTML = str;
    			}
    		}
    	var url = '/ajax/books.xml';
    	xhr.open('get', url, true);
    	xhr.send(null);
    }
    </script>
    </html>

package com.jiongmeng.entity;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class News {
    	
    	private String id;
    	private String title;
    	
    	public News() {
    		super();
    	}
    
    	public News(String id, String title) {
    		super();
    		this.id = id;
    		this.title = title;
    	}
    
    	public String getId() {
    		return id;
    	}
    
    	public void setId(String id) {
    		this.id = id;
    	}
    
    	public String getTitle() {
    		return title;
    	}
    
    	public void setTitle(String title) {
    		this.title = title;
    	}
    
    	public List<News> showNews() {
    		List<News> news = new ArrayList<News>();
    		news.add(new News("1", "杨幂和魏大勋传出绯闻"));
    		news.add(new News("2", "林志玲结婚啦"));
    		news.add(new News("3", "朝鲜半岛局势剑拔弩张"));
    		news.add(new News("4", "黄晓明确认参加《中餐厅》录制"));
    		news.add(new News("5", "鹿晗和关晓彤深夜撒狗粮"));
    		news.add(new News("6", "林志玲开直播，网友直呼认不出来了！"));
    		return news;
    	}
    	
    	
    
    }

package com.jiongmeng.ajax;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.List;
    
    import javax.servlet.ServletConfig;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.jiongmeng.entity.News;
    
    /**
     * 获取新闻列表
     */
    @WebServlet("/ajaxNewsList")
    public class AjaxNewsList extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		response.setContentType("text/html;charset=UTF-8");
    		PrintWriter pw = response.getWriter();
    		News news = new News();
    		StringBuffer sb = new StringBuffer();
    		List<News> newsList = news.showNews();
    		for (News newInfo : newsList) {
    			String id = newInfo.getId();
    			String title = newInfo.getTitle();
    			//直接在服务端拼接成html，直接返回html给客户端，让客户端自己去处理这段html
    			sb.append("<li><a href=\"news.jsp?id=" + id + "\">" + title + "</a></li>");
    		}
    		try {
    			// 模拟网络慢的情况
    			Thread.sleep(3000);
    		} catch (InterruptedException e) {
    			e.printStackTrace();
    		}
    		System.out.println(sb.toString());
    		pw.print(sb.toString());
    		pw.flush();
    		pw.close();
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		doGet(request, response);
    	}
    
    	@Override
    	public void init(ServletConfig config) throws ServletException {
    
    	}
    
    }

package com.jiongmeng.ajax;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletConfig;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * 获取xml数据
     */
    @WebServlet("/ajaxXml")
    public class AjaxXml extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		response.setContentType("text/xml;charset=UTF-8");
    		PrintWriter pw = response.getWriter();
    		StringBuffer sb = new StringBuffer();
    		sb.append("<books>");
    		sb.append("<book><name>笑傲江湖</name><author>金庸</author></book>");
    		sb.append("<book><name>小李飞刀</name><author>古龙</author></book>");
    		sb.append("<book><name>水浒传</name><author>施耐庵</author></book>");
    		sb.append("<book><name>西游记</name><author>吴承恩</author></book>");
    		sb.append("<book><name>三国演义</name><author>罗贯中</author></book>");
    		sb.append("<book><name>红楼梦</name><author>曹雪芹</author></book>");
    		sb.append("</books>");
    		try {
    			// 模拟网络慢的情况
    			Thread.sleep(3000);
    		} catch (InterruptedException e) {
    			e.printStackTrace();
    		}
    		System.out.println(sb.toString());
    		pw.print(sb.toString());
    		pw.flush();
    		pw.close();
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		doGet(request, response);
    	}
    
    	@Override
    	public void init(ServletConfig config) throws ServletException {
    
    	}
    
    }

**books.xml**

<?xml version="1.0" encoding="UTF-8"?>
    <books>
    <book><name>鹿鼎记</name><author>金庸</author></book>
    <book><name>萍踪侠影</name><author>梁羽生</author></book>
    <book><name>笑傲江湖</name><author>金庸</author></book>
    <book><name>小李飞刀</name><author>古龙</author></book>
    <book><name>四大名捕</name><author>温瑞安</author></book>
    </books>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 12][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 13][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 14][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 15][] ![20200819184624698.png][]

**完！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221124/c40628ae7c654d438457df9a6b3bde23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221124/80dcb00a4fa840e889e962a7f2ece728.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: /images/20221124/7f93e813c6f3424d9ecbfe5f0b01cc7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3]: /images/20221124/66f7e7be1e9a403cb18716f4758df2ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4]: /images/20221124/47e792c2a24a43f7b2a644aedfc36a1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5]: /images/20221124/81c997a2b81041a5a2cd8d6eacce792a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 6]: /images/20221124/aa0688d6f123473793f539d8bf974ac7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 7]: /images/20221124/29f53f05b5834963941c4ea613e3dcd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 8]: /images/20221124/9b1ff86ca74343bbbc8db25948c330f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 9]: /images/20221124/7671bc6e04dd4583b9a814cf5a743d02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 10]: /images/20221124/066753f2c7264bbeb7224200e9729b66.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 11]: /images/20221124/4197f006fe6d410bafaf600f593764f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 12]: /images/20221124/74b1f52f4748496f8ee24ca8e9773db6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 13]: /images/20221124/6d604678137e42ec8a949b95de48eaaf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20200819184518401.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20200819184550556.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70
[20200819184624698.png]: /images/20221124/a1ff493ee8184fe39a8e33d5e4e36f80.png