尚硅谷视频学校教程1
Posted luzhouxiaoshuai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了尚硅谷视频学校教程1相关的知识，希望对你有一定的参考价值。
1.+尚硅谷_佟刚_Ajax_概述.wmv
2.+尚硅谷_佟刚_Ajax_使用+XMLHttpRequest+实现+Ajax.wmv
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。
接下来我们来实现一个helloword心建立一个Java web动态工程
我们在webRoot目录下一个hello.txt文件
文件的内容如下
hello ajax!!!
我们在index.jsp目录下添加一个a标签，点击浏览器页面中a标签的时候采用ajax的方式访问服务器段hello.txt文件，并将文件的值在alert中显示出来
index.jsp内容如下
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <!-- 未采用jquery框架实现ajax --> <!-- --> <script type="text/javascript"> //页面加载完成之后会调用 window.onload = function()函数 window.onload = function(){ //获得a元素的第一个节点，添加click点击事 //获得a元素的第一个节点，添加click点击事件 document.getElementsByTagName("a")[0].onclick = function(){ //2创建一个XMLHTTPrequest对象 var request = new XMLHttpRequest(); //请求的url，就是当前dom对象的href属性 var url = this.href; //采用get的请求方式 var method= "GET"; //4调用对象的open方法 request.open(method, url); //5 调用send方法发送请求 request.send(null); //6 为对象添加响应函数 request.onreadystatechange = function(){ //判断响应是否完成 if(request.readyState == 4){ //在判断响应是否可用 if(request.status == 200 || request.status == 304){ //默认的返回值是问题类型，将返回的结果打印出来,这里还可以返回json或者xml格式的数据 alert(request.responseText); } } } return false; } } </script> </head> <body> <!-- 添加一个a标签，采用ajax的方式将读取hello.txt的内容在对话框中显示出来 --> <a href="${pageContext.request.contextPath }/hello.txt">显示内容</a> </body> </html>
运行效果
点击显示内容的时候弹出对应的内容
很多时候为了避免浏览器的缓存，我们请求的时候都带上一个时间戳，保证每次请求都不一样
//请求的url，就是当前dom对象的href属性
var url = this.href + "?time="+new Date();
上面是采用GET的方式请求，下面我们采用post的方式请求
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <!-- 未采用jquery框架实现ajax --> <!-- --> <script type="text/javascript"> //页面加载完成之后会调用 window.onload = function()函数 window.onload = function(){ //获得a元素的第一个节点，添加click点击事 //获得a元素的第一个节点，添加click点击事件 document.getElementsByTagName("a")[0].onclick = function(){ //2创建一个XMLHTTPrequest对象 var request = new XMLHttpRequest(); //请求的url，就是当前dom对象的href属性 var url = this.href + "?time="+new Date(); //采用get的请求方式 var method= "POST"; //4调用对象的open方法 request.open(method, url); //如果是post方式需要在send之前，open之后设置 request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //5 调用send方法发送请求 request.send(null); //6 为对象添加响应函数 request.onreadystatechange = function(){ //判断响应是否完成 if(request.readyState == 4){ //在判断响应是否可用 if(request.status == 200 || request.status == 304){ //默认的返回值是问题类型，将返回的结果打印出来,这里还可以返回json或者xml格式的数据 alert(request.responseText); } } } return false; } } </script> </head> <body> <!-- 添加一个a标签，采用ajax的方式将读取hello.txt的内容在对话框中显示出来 --> <a href="${pageContext.request.contextPath }/hello.txt">显示内容</a> </body> </html>
如果post需要传递参数要在send函数中封装
3.+尚硅谷_佟刚_Ajax_数据格式_HTML.wmv
对于返回值是html格式的数据，我们可以直接使用innerHTML标签进行操作
我们来看下面这样的案例
我们在index.sjp页面上新增一个div标签，我们将读取的hello.txt值直接赋值在div节点的后面
<div id="detail"></div>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <!-- 未采用jquery框架实现ajax --> <!-- --> <script type="text/javascript"> //页面加载完成之后会调用 window.onload = function()函数 window.onload = function(){ //获得a元素的第一个节点，添加click点击事 //获得a元素的第一个节点，添加click点击事件 document.getElementsByTagName("a")[0].onclick = function(){ //2创建一个XMLHTTPrequest对象 var request = new XMLHttpRequest(); //请求的url，就是当前dom对象的href属性 var url = this.href + "?time="+new Date(); //采用get的请求方式 var method= "POST"; //4调用对象的open方法 request.open(method, url); //如果是post方式需要在send之前，open之后设置 request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //5 调用send方法发送请求 request.send(null); //6 为对象添加响应函数 request.onreadystatechange = function(){ //判断响应是否完成 if(request.readyState == 4){ //在判断响应是否可用 if(request.status == 200 || request.status == 304){ //默认的返回值是问题类型，将返回的结果打印出来,这里还可以返回json或者xml格式的数据 //将返回值赋值给id为dedtail的节点 document.getElementById("detail").innerHTML=request.responseText; } } } return false; } } </script> </head> <body> <!-- 添加一个a标签，采用ajax的方式将读取hello.txt的内容在对话框中显示出来 --> <a href="${pageContext.request.contextPath }/hello.txt">显示内容</a> <div id="detail"></div> </body> </html>
运行的效果为
接下来我们返回一个xml文件
我们修改ajax.xml文件的值为如下形式
<?xml version="1.0" encoding="UTF-8"?> <details> <name>andy</name> <website>http://www.baidu.com</website> <email>hjsjsj@qq.com</email> </details>
我们首先对返回的xml文件进行解析
我们采用post的方式请求该文件
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <!-- 未采用jquery框架实现ajax --> <!-- --> <script type="text/javascript"> //页面加载完成之后会调用 window.onload = function()函数 window.onload = function(){ //获得a元素的第一个节点，添加click点击事 //获得a元素的第一个节点，添加click点击事件 document.getElementsByTagName("a")[0].onclick = function(){ //2创建一个XMLHTTPrequest对象 var request = new XMLHttpRequest(); //请求的url，就是当前dom对象的href属性 var新老更替 | 尚硅谷新版SpringMVC视频教程发布！