尚硅谷ajax视频教程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 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){
//返回的xml格式的文件不能直接使用，需要进行解析
var result = request.responseXML;
//对xml文件中的<name>andy</name>属性进行解析
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
var email = result.getElementsByTagName("email")[0].firstChild.nodeValue; alert(name);
alert(website);
alert(email); } }
} return false;
}
} </script>
</head> <body>
<!-- 添加一个a标签，采用ajax的方式将读取hello.txt的内容在对话框中显示出来 -->
<a href="${pageContext.request.contextPath }/ajax.xml">显示内容</a>
<div id="detail"></div>
</body>
</html>
项目框架如下所示
5.+尚硅谷_佟刚_Ajax_数据格式_JSON.wmv
我解析json，我们需要使用到javascript的eval函数
定义和用法
eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。
如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。
我们来举例说下下面
当eval执行teststr的时候就会弹出一个对话框
<%@ 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(){
//解析json数据
var jsonStr="{'name':'andy'}";
//使用eval解析json,必须按照下面的形式eval("("+jsonStr+")");才能解析
var jsonObject = eval("("+jsonStr+")");
alert(jsonObject.name);
} </script>
</head> <body> <!-- 添加一个a标签，采用ajax的方式将读取hello.txt的内容在对话框中显示出来 -->
<a href="${pageContext.request.contextPath }/ajax.xml">显示内容</a>
<div id="detail"></div>
</body>
</html>
程序运行的效果如下所示
6.+尚硅谷_佟刚_Ajax_使用+jQuery+实现+Ajax.wmv
load方法第一个参数是url，中间是请求参数，第三个函数是回调函数
接下来我们建立下面这样一个工程
在webroot下新建立一个scripts文件夹把我们的js文件拷贝到该文件夹下面
我们现在有一个hello.txt,文件，文件内容如下所示
hello.txt
hellos jsjdsj
在test.jsp页面中我们点击a标签的时候，我们采用load的访问去请求hello.txt文件的内容，将结果赋值给id为detail的div标签中
我们来看testload.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>
<!-- 加入js文件 -->
<script type="text/javascript " src="${pageContext.request.contextPath }/scripts/jquery-2.0.3.js"></script>
<script type="text/javascript">
//采用jquery的形式访问ajax
$(function(){
alert("k,skk");
//给a节点添加onclick事件
$("a").click(function(){ //使用load方式，将获得的文本数据加载到detail标签中
//这里this表单dom对象，不是jquery对象，这里获得dom对象的href属性值
var href = this.href;
alert(href);
//load的第一个参数是url，第二个参数是请求的参数，第三个参数是服务器返回的回调
//这里增加一个时间参数，让每次请求的url都不一样
var args = {"time":new Date()};
$("#detail").load(href,args);
//取消按钮的默认返回值
return false;
});
alert("k,skk000");
}) </script>
</head> <body> <!-- 添加一个a标签，采用ajax的方式将读取hello.txt的内容在对话框中显示出来 -->
<a href="${pageContext.request.contextPath }/hello.txt">testload</a>
<div id="detail"></div>
</body>
</html>
我们来看程序运行的效果
当点击a标签的时候，或者文本的值赋值给div标签
接下来我们是get请求的方式去加载一个xml文件，解析xml文件，按照一定的方式封装到div标签中
我们先来看下xml文件的内容如下所示
ajax.xml内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<details>
<name>andy</name>
<website>http://www.baidu.com</website>
<email>123@qq.com</email>
</details>
我们来查看我们的代码
testget.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>
<!-- 加入js文件 -->
<script type="text/javascript " src="${pageContext.request.contextPath }/scripts/jquery-2.0.3.js"></script>
<script type="text/javascript">
//采用jquery的形式访问ajax
$(function(){
//给a节点添加onclick事件
$("a").click(function(){ //使用get方式，将获得的文本数据加载到detail标签中
//这里this表单dom对象，不是jquery对象，这里获得dom对象的href属性值
var href = this.href;
//load的第一个参数是url，第二个参数是请求的参数，第三个参数是服务器返回的数据，封装到data对象中
//这里增加一个时间参数，让每次请求的url都不一样
var args = {"time":new Date()};
$.get(href,args,function(data){
//解析返回的数据，$(data)将dom对象转换成jquery对象
//调用jquery对象的find方法，返回的也是jquery对象，调用text()方法获得该对象的值，如果是text("123")表示给对象赋值123
var name = $(data).find("name").text();
var website = $(data).find("website").text();
var email = $(data).find("email").text();
alert(name);
alert(website);
alert(email); });
//取消按钮的默认返回值
return false;
});
alert("k,skk000");
}) </script>
</head> <body> <!-- 添加一个a标签，采用ajax的方式将读取hello.txt的内容在对话框中显示出来 -->
<a href="${pageContext.request.contextPath }/ajax.xml">testget</a>
<div id="detail"></div>
</body>
</html>
对于post请求和上面的get请求一样，没有本质的区别
<%@ 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>
<!-- 加入js文件 -->
<script type="text/javascript " src="${pageContext.request.contextPath }/scripts/jquery-2.0.3.js"></script>
<script type="text/javascript">
//采用jquery的形式访问ajax
$(function(){
//给a节点添加onclick事件
$("a").click(function(){ //使用get方式，将获得的文本数据加载到detail标签中
//这里this表单dom对象，不是jquery对象，这里获得dom对象的href属性值
var href = this.href;
//load的第一个参数是url，第二个参数是请求的参数，第三个参数是服务器返回的数据，封装到data对象中
//这里增加一个时间参数，让每次请求的url都不一样
var args = {"time":new Date()};
$.post(href,args,function(data){
//解析返回的数据，$(data)将dom对象转换成jquery对象
//调用jquery对象的find方法，返回的也是jquery对象，调用text()方法获得该对象的值，如果是text("123")表示给对象赋值123
var name = $(data).find("name").text();
var website = $(data).find("website").text();
var email = $(data).find("email").text();
alert(name);
alert(website);
alert(email); });
//取消按钮的默认返回值
return false;
});
alert("k,skk000");
}) </script>
</head> <body> <!-- 添加一个a标签，采用ajax的方式将读取hello.txt的内容在对话框中显示出来 -->
<a href="${pageContext.request.contextPath }/ajax.xml">testpost</a>
<div id="detail"></div>
</body>
</html>
接下来我们请求json文件，我们使用getJson
我们在webconteent下面新建一个json文件，文件的后缀名以js结尾，也可以是其他方式例如txt，最好采用js的方式
我们取名为hello.js
[{
"name": "吴者然",
"sex": "男",
"email": "demo1@123.com"
}, {
"name": "吴中者",
"sex": "男",
"email": "demo2@123.com"
}, {
"name": "何开",
"sex": "女",
"email": "demo3@123.com"
}]
我们在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>
<!-- 加入js文件 -->
<script type="text/javascript " src="${pageContext.request.contextPath }/scripts/jquery-2.0.3.js"></script>
<script type="text/javascript">
//采用jquery的形式访问ajax
$(function(){
//给a节点添加onclick事件
$("a").click(function(){ //使用get方式，将获得的文本数据加载到detail标签中
//这里this表单dom对象，不是jquery对象，这里获得dom对象的href属性值
var href = this.href;
//load的第一个参数是url，第二个参数是请求的参数，第三个参数是服务器返回的数据，封装到data对象中
//这里增加一个时间参数，让每次请求的url都不一样
var args = {"time":new Date()};
$.getJSON(href,args,function(data){
//$("#detail")是一个jquery对象，定义一个jquery一般是var $jsontip有标识符$
//如果是var jsontip表示定义一个普通的dom对象
var $jsontip = $("#detail");
//对json数据进行解析封装到id为detail的div中
//定义一个临时的dom对象
var strHtml="";
$.each(data,function(infoindex,info){
strHtml += "姓名："+info["name"]+"<br>";
strHtml += "性别："+info["sex"]+"<br>";
strHtml += "邮箱："+info["email"]+"<br>";
strHtml += "<hr>" })
$jsontip.html(strHtml);//显示处理后的数据 });
//取消按钮的默认返回值
return false;
});
alert("k,skk000");
}) </script>
</head> <body> <!-- 添加一个a标签，采用ajax的方式将读取hello.txt的内容在对话框中显示出来 -->
<a href="${pageContext.request.contextPath }/hello.js">testJson</a>
<div id="detail"></div>
</body>
</html>
程序运行的效果如下所示：
尚硅谷ajax视频教程1的更多相关文章
- 尚硅谷ajax视频教程2
7.7. 尚硅谷_佟刚_Ajax_典型应用_验证用户名是否可用 整个项目的目录路径如下所示 我们首先新建立一个web工程,在webroot下面新建立一个script的文件夹,导入jquer文件 接下来 ...
- 尚硅谷maven视频教程笔记
07.尚硅谷_Maven_部署Maven核心程序.avi 第一步先安装jdk 第二步下载maven 特别需要注意的是maven不能存储在有中文和空格的目录下面 3.调试是否安装成功,在cmd中输入 m ...
- 尚硅谷Java视频教程导航（学习路线图）
最近很火,上去看了看,对于入门的人还是有点作用的,做个记号,留着以后学习. Java视频教程下载导航(学习路线图) 网站地址:http://www.atguigu.com/download.shtml
- 2018年尚硅谷《全套Java、Android、HTML5前端视频》
全套整合一个盘里:链接:https://pan.baidu.com/s/1nwnrWOp 密码:h4bw 如果分类里没有请下载下边那些小项教程链接 感谢尚硅谷提供的视频教程:http://www.at ...
- 尚硅谷《全套Java、Android、HTML5前端视频》
尚硅谷<全套Java.Android.HTML5前端视频> (百万谷粉推荐:史上最牛.最适合自学的全套视频.资料及源码) [尚硅谷官网资料导航] 谷粒学院在线学习:http://www.g ...
- 3、尚硅谷_SSM高级整合_使用ajax操作实现修改员工的功能
当我们点击编辑案例的时候,我们要弹出一个修改联系人的模态对话框,在上面可以修改对应的联系人的信息 这里我们我们要编辑按钮添加点击事件弹出对话框 第一步:在页面中在新增一个编辑联系人的模态对话框 第二步 ...
- 3、尚硅谷_SSM高级整合_使用ajax操作实现删除的功能
点击删除的时候,要删除联系人,这里同点击编辑按钮一样给删除按钮添加点击事件的时候不能使用 $(".delete_btn").click(function(){ }); 这种方式,因 ...
- 3、尚硅谷_SSM高级整合_使用ajax操作实现增加员工的功能
20.尚硅谷_SSM高级整合_新增_创建员工新增的模态框.avi 1.接下来当我们点击增加按钮的时候会弹出一个员工信息的对话框 知识点1:当点击新增的时候会弹出一个bootstrap的一个模态对话框 ...
- 2、尚硅谷_SSM高级整合_使用ajax操作实现页面的查询功能
16.尚硅谷_SSM高级整合_查询_返回分页的json数据.avi 在上一章节的操作中我们是将PageInfo对象存储在request域中,然后list页面解析request域中的对象实现信息的显示. ...
随机推荐
- 关于使用npm成功安装命令后,执行时却报找不到命令的问题
# 使用npm安装newman命令 ~$ npm install newman --global ... /root/node-v6.9.1-linux-x64/bin/newman -> /r ...
- 拨号vps，拨号vps是什么意思干什么用的，如何使用拨号vps
首先,拨号vps是动态IP的VPS.vps虚拟服务器.拨号服务器.有些业务,如刷单.投票等操作对ip地址有限制,不能过多的使用.而拨号VPS通过拨号上网,每拨号一次号,就变一次IP,完成ip地址的动态 ...
- 关于如何提高SRAM存储器的新方法
SRAM是当今处理器上最普遍的内存.当芯片制造商宣布他们已经成功地将更多的电路封装到芯片上时,通常是较小的晶体管引起了人们的注意.但是连接晶体管形成电路的互连也必须收缩.IMEC的研究人员提出了一个方 ...
- (String),toString(),String.valueOf()
String.valueOf("")的源码:(推荐这种写法) 注意:obj问null时,返回值是字符串"null" toString("") ...
- Java实现 蓝桥杯 算法训练 Pollution Solution
试题 算法训练 Pollution Solution 问题描述 作为水污染管理部门的一名雇员,你需要监控那些被有意无意倒入河流.湖泊和海洋的污染物.你的其中一项工作就是估计污染物对不同的水生态系统(珊 ...
- Java实现 蓝桥杯 算法提高 概率计算
算法提高 概率计算 时间限制:1.0s 内存限制:256.0MB 问题描述 生成n个∈[a,b]的随机整数,输出它们的和为x的概率. 输入格式 一行输入四个整数依次为n,a,b,x,用空格分隔. 输出 ...
- Java实现 蓝桥杯 算法提高 复数四则运算
算法提高 6-17复数四则运算 时间限制:1.0s 内存限制:512.0MB 提交此题 设计复数库,实现基本的复数加减乘除运算. 输入时只需分别键入实部和虚部,以空格分割,两个复数之间用运算符分隔:输 ...
- Java实现 LeetCode 4 寻找两个有序数组的中位数
寻找两个有序数组的中位数 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 n ...
- Java实现 蓝桥杯 算法提高 Monday-Saturday质因子
试题 算法提高 Monday-Saturday质因子 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 这个问题是个简单的与数论有关的题目,看起来似乎是"求正整数的所有质因子 ...
- Linux rsyslogd日志服务
日志基本格式 基本日志格式包含四列: 事件发生的时间 发生事件的服务器的主机名 产生事件的服务名或程序名 事件的具体信息 /etc/rsyslog.conf配置文件 mail.* ...