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给客户端，让客户端自己去处理这段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>
完！