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

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

<!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给客户端，让客户端自己去处理这段htmlsb.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);}@Overridepublic 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);}@Overridepublic 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>

完！

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

jQuery使用ajax跨域请求获取数据
jQuery使用ajax跨域请求获取数据跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内 ...
获取天气预报ajax,Ajax 通过城市名获取数据(全国天气预报API)
预览图(比较简单粗糙) 聚合数据全国天气预报接口: 接口地址:http://v.juhe.cn/weather/index 支持格式:json/xml 请求方式:get 请求示例:http://v.j ...
js ajax获取天气预报,Ajax 通过城市名获取数据(全国天气预报API)
AJAX 的 Ajax 通过城市名获取数据(全国天气预报API) 预览图(比较简单粗糙) 聚合数据全国天气预报接口: 接口地址:http://v.juhe.cn/weather/index 支持格式: ...
Python爬虫笔记——分析AJAX传递的JSON获取数据-初步分析动态网页
转载文章链接: Python爬虫:分析AJAX传递的JSON获取数据-初步分析动态网页(1) [4]实战:爬取动态网页的两种思路爬取新浪趣图(1) [5]实战:爬取动态网页的两种思路爬取新浪趣图(2) ...
ajax 获取java数据_如何使用Ajax从服务端获取数据
在本文中将给出一个例子来介绍使用 Ajax 技术从服务端获得数据的三种方法.这个例子很简单,就是两个选择框(html中的标签),通过选中第一个select的某一项后,会从服务端得到一些数据,并加载到第 ...
jQuery之ajax的跨域获取数据
如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务 ...
ajax中get请求获取数据
回到文章总目录 1.创建在testtwo文件夹并在这个文件夹里面 2.创建get.html文件 3.创建server.js文件 get.html文件 <!DOCTYPE html> < ...
小程序获取openid和unionid服务号获取unionid服务号消息推送
网上很多资料但是都太杂太乱很多是复制过来复制过去,微信官方给的文档也很坑很多地方没说清,自己整理了一下. 首先:要获取unionid服务号和小程序都要绑定到微信开放平台,并且都要认证,认证需要一定费用 ...
遥感卫星数据共享服务平台：数据服务终端
转载自https://www.cnblogs.com/rainbow70626/p/6414956.html 项目背景中国-东盟遥感卫星数据共享服务平台是在中国科技部的支持下,依托中国遥感卫星数据资 ...

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

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

最新文章

热门文章