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>


程序运行的效果如下所示：






 


												


																

最新文章
	

    
						
  1. HDU-4057 Rescue the Rabbit（AC自动机+DP）
		
    2. 
						
  2. sql 根据指定条件获取一个字段批量获取数据插入另外一张表字段中+MD5加密
		
    3. 
						
  3. 不错的判断 UITextView 内容不超过20个字符串的方法
		
    4. 
						
  4. php基础－转义字符
		
    5. 
						
  5. Android开发：第五日番外——过时的函数和被横杠的函数
		
    6. 
						
  6. Linux内核
		
    7. 
						
  7. bat中的连接符
		
    8. 
						
  8. chrome浏览器默认样式覆盖input背景
		
    9. 
						
  9. 使用SQL语句创建和删除约束
		
    10. 
						
  10. CentOS 7 服务器配置--配置iptables防火墙
		
    11. 
						
  11. java如何将html过滤为纯文本
		
    12. 
						
  12. Javascript中DataGrid表格纵线添加数据
		
    13. 
						
  13. 【慕课网实战】一、以慕课网日志分析为例 进入大数据 Spark SQL 的世界
		
    14. 
						
  14. HITS算法--从原理到实现
		
    15. 
						
  15. python中的os.path.dirname(__file__)的使用
		
    16. 
						
  16. ElasticSearch 2 (2) - Setup
		
    17. 
						
  17. HttpContext.Current.Session 和 Session 的区别
		
    18. 
						
  18. git工具的使用
		
    19. 
						
  19. OpenStack 认证服务 KeyStone 服务注册（六）
		
    20. 
						
  20. zookeeper 事务日志与快照日志
		
    21. 
		

	


热门文章
	

    
									
  1. Django ListView DetailView等基于类的视图如何添加装饰器？
			
    2. 
						
  2. 【转】shell的反引号、单引号、双引号的作用
			
    3. 
						
  3. Linux光盘yum源软件安装
			
    4. 
						
  4. 潜入FLEXBOX——CSS弹性布局
			
    5. 
						
  5. 使用css实现loading的加载
			
    6. 
						
  6. Postman+Newman+Git+Jenkins接口自动化测试
			
    7. 
						
  7. 【HIVE】hive的安装与使用教程
			
    8. 
						
  8. 高性能可扩展mysql 笔记（一）数据库表、索引、SQL语句设计规范
			
    9. 
						
  9. SQL Server实现 LeetCode 176 第二高的薪水
			
    10. 
						
  10. 第三届蓝桥杯JavaC组国(决)赛真题
			
    11.