java中的jQuery与Ajax的应用,菜鸟教程

一、简介   1. Ajax,并不是指一种单一的技术,而是有机的利用了一系列交互式网页应用相关的技术所形成的结合体。Ajax揭开了无刷新更新页面的新时代,并有代替系统的Web方式和通过隐藏的框架来进行异步提交的趋势,是Web开发应用的一个里程碑。Ajax全称(AsynchronousJavaScriptandXML),即异步JavaScript和XML。实现客户端异步请求操作,不刷新整个…

大家好,又见面了,我是你们的朋友全栈君。

一、简介

     1. Ajax,并不是指一种单一的技术,而是有机的利用了一系列交互式网页应用相关的技术所形成的结合体。Ajax揭开了无刷新更新页面的新时代,并有代替系统的Web方式和通过隐藏的框架来进行异步提交的趋势,是Web开发应用的一个里程碑。Ajax全称(Asynchronous JavaScript and XML),即异步JavaScriptXML。实现客户端异步请求操作,不刷新整个页面进行服务器通信,减少等待时间。

简单来说,Ajax就是异步通讯机制,实现局部刷新。

Ajax的优势与不足
优点 缺点
不需要插件支持 浏览器对XMLHttpRequest对象的支持度不足
优秀的用户体验 破坏浏览器的前进后退按钮的正常使用
提高Web程序的性能 对搜索引擎的支持不足
减轻服务器和宽带的负担 开发和调试工具的缺乏

2.Ajax的XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。

利用
XMLHttpRequest
(XHR)
对象,每次构建
Ajax
应用必须遵循以下步骤:
(1)创建
XMLHttpRequest
对象
(2)创建
Ajax
请求
(3)发送
Ajax
请求
(4)处理服务器响应

3.XMLHttpRequest属性:

(1)ReadyState

        0 “未初始化”, (XMLHttpRequest)对象已经创建,但还没有调用open()方法。
        1 “发送”状态,已经准备好把一个请求发送到服务器。
        2 “发送完成”状态,已经把一个请求发送到服务器端,但还没有响应。
        3 “正在接收”状态,已经接收,还没有完全接收结束。
        4 “已加载”状态,响应已经被完全接收。

(2)responseTextresponseXML       请求返回的文本或XML内容

(3)status Http状态码

        

    100——客户必须继续发出请求

    101——客户要求服务器根据请求转换HTTP协议版本

    200——成功

    201——提示知道新文件的URL

    300——请求的资源可在多处得到

    301——删除请求数据

    404——没有发现文件、查询或URl

    500——服务器产生内部错误

4.方法
labort()暂停请求,并重置到未初始化状态
lopen()  加载要链接的页面
lsend()  把该请求发送到服务器

说明:1) send方法有一个content参数,它标识要向服务器发送的数据,其格式

                  查询字符串的形式,例如:

                  var content = “userName=li&sex=male&age=25″;

                  xmlHttp.send(content);

          2)如果提交方法是get方式,则这些参数作为查询字符串提交;如果指定的

                post方式,则这些参数是放入请求体提交。

         3)Request.getParameter(“参数名”)获取对应的值

         4) Open方法中指定的是post提交请求,那么在send之前必须设置http头信息

           xmlHttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);

事件onreadystatechange ———readyState值发生改变时候触发




二、JQUERY的AJAX实现(一)

jQueryAjax进行了封装。

JQuery中的Ajax请求方法:

    $.load(
url
,[data], [callback])
    $.get(
url
,[data], [
fn
],[type])
    $.post(
url
,[data],[callback])
    $.
getJSON
(
url
, [data], [
fn
])
    $.
getScript
(
url
,[callback])
    $.ajax([
options
])

1load()方法

   能够载入远程HTML代码并插入DOM中。

  语法:

  load( url [,data] [ ,callback])

  url:请求HTML页面的URL地址

  data:发送至服务器的数据

  callback:请求完成时的回调函数,无论请求成功或失败

    

例子:创建一个HTML文件,名字为inner.html,然后再建一个页面test.html,添加一个button元素,添加一个idresTest的元素,当单击button时,resText显示追加的HTML内容。

HTML代码略。

jQuery代码如下:     

$(function){
    $(“#send”).click(function(){
        $(“#resTest”).load(“test.hmtl .para”);
    });
}

2.$.get()方法

 使用get方法来进行异步请求.

 $.get(url[,data] [,callback] [,type])

 url:请求的HTML页的URL地址 例如:test.jsp

  data:发送至服务器的数据会作为QueryString附加到请求URL中。如:

        {name:’zhangs’}

  callback:载入成功时回调函数(只有当Response的返回状态是success

        才调用该方法)自动将请求结果和状态传递给该方法。例如 

         function(dt){alert(dt)}

  type:服务器返回内容的格式,包括xml html script json text 

例子:

页面搭建:

<body>
		<form id="form1">
			<p>评论:</p>
			<p>姓名:<input type="text" name="username" id="username" /></p>
			<p>内容:<textarea name="content" id="content"></textarea></p>
			<p><input type="button" id="send" value="提交" /></p>
		</form>


		<div class='comment'>
			已有评论:
		</div>
		<div id="resText">
		</div>
	</body>

servlet代码:

//编码
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		//获取表单控件值
		String username=request.getParameter("username");
		String content=request.getParameter("content");
		//输出到客户端
		out.println("<div class='comment'><h6> " + username + " :</h6><p class='para'> " 
                + content + " </p></div>");
		
		out.flush();
		out.close();

jq有三种写法:

第一种:

<script src="scripts/jquery.js" type="text/javascript"></script>
		<script language="javascript">
	$(function() {
		$("#send").click(function() {
			$.get("GetHtmlServlet", {
				username : $("#username").val(),
				content : $("#content").val()
			}, function(data, textStatus) {
				$("#resText").append(data); // 把返回的数据添加到页面上
				});
		})
	})
</script>

第二种:

<script src="scripts/jquery.js" type="text/javascript"></script>
		<script language="javascript">
	$(function(){
	   $("#send").click(function(){
			$.get("GetXmlServlet", { 
						username :  $("#username").val() , 
						content :  $("#content").val()
		}, function(data, textStatus) {
					    
					    var username = $(data).find("comment").attr("username");
						var content = $(data).find("comment content").text();
					    var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
                        $("#resText").append(txtHtml); // 把返回的数据添加到页面上
					});
	   })
	})
</script>

第三种:

	<script src="scripts/jquery.js" type="text/javascript"></script>
		<script language="javascript">
	$(function(){
	   $(function() {
        $("#send").click(function() {
            $.get("GetJsonServlet", {
                username: $("#username").val(),
                content: $("#content").val()
            }, function(data, textStatus) {
               // alert(data);
                var username = data.username;
                var content = data.content;
                var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>";
                $("#resText").html(txtHtml); // 把返回的数据添加到页面上
            }, "json");
        })
    })
})
</script>

3.$.post()方法

方法与get()差不多只是把传参方式改成post

4.$ajax()

<script src="scripts/jquery.js" type="text/javascript"></script>
 <script>
   $(function(){
        $('#send').click(function() {
            $.ajax({
			  type: "get",
			  url: "JsonListServlet",
			  dataType: "json",
			  success : function(data){
			         $('#resText').empty();
					  var html = '';
					  $.each( data  , function(commentIndex, comment) {
						  html += '<div class="comment"><h6>' + comment['userName'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
					  })
					 $('#resText').html(html);
			  }
			}); 
        });
   })
   </script>
  </head>
  
  <body>
<p><input type="button" id="send" value="加载"/></p>
<div  class="comment">已有评论:</div>
<div id="resText" ></div>
  </body>
</html>

5.$.getScript()

写一个.js文件

var comments = [
  {
    "username": "zhanagsan",
    "content": "hello1."
  },
  {
    "username": "鏉庡洓",
    "content": "hello2."
  },
  {
    "username": "wangwu",
    "content": "hello3."
  }
];
  var html = '';
  $.each( comments , function(commentIndex, comment) {
      html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
  })

  $('#resText').html(html);

然后建一个网页调用

<script src="scripts/jquery.js" type="text/javascript"></script>
 <script>
   $(function(){
        $('#send').click(function() {
             $.getScript('script/test.js');
        });
   })
   </script>
  </head>
  <body>
<input type="button" id="send" value="加载"/>
<div  class="comment">已有评论:</div>
<div id="resText" ></div>
  </body>
</html>

6.$.getJSON()

在调用json时,需要导入jar

java中的jQuery与Ajax的应用,菜鸟教程

json:

[
  {
    "username": "张三",
    "content": "沙发"
  },
  {
    "username": "李四",
    "content": "板凳"
  },
  {
    "username": "王五",
    "content": "没有"
  }
]

GetJsonServlert:

public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//编码
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");

		PrintWriter out = response.getWriter();
		//获取表单控件值
		String username=request.getParameter("username");
		String content=request.getParameter("content");
		//输出到客户端
		 out.print("{ \"username\" :\"" + username + "\" , \"content\" :\"" + content + "\"}");	
		out.flush();
		out.close();
	}

网页:

 <!--   引入jQuery -->
<script src="../scripts/jquery.js" type="text/javascript"></script>
 <script>
     $(function() {
         $('#send').click(function() {
             $.getJSON('../JsonListServlet', function(data) {
                  //alert(data);
                 $('#resText').empty();
                 var html = '';
                 $.each(data, function(commentIndex, comment) {
                     html += '<div class="comment"><h6>' + comment['userName'] + ':</h6><p class="para">' + comment.content + '</p></div>';
                 })
                 $('#resText').html(html);
             })
         })
     })
   </script>
</head>
<body>
 <br/>
 <p>
	 <input type="button" id="send" value="加载"/>
 </p>

<div  class="comment">已有评论:</div>
 <div id="resText" >
 </div>
</body>
</html>

也可以网页直接调用json,就不用servlet了

<script>
     $(function() {
         $('#send').click(function() {
             $.getJSON('test.json', function(data) {
                 $('#resText').empty();
                 var html = '';
                 $.each(data, function(commentIndex, comment) {
                     html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
                 })
                 $('#resText').html(html);
             })
         })
     })
   </script>
</head>
<body>
 <br/>
 <p>
	 <input type="button" id="send" value="加载"/>
 </p>

<div  class="comment">已有评论:</div>
 <div id="resText" >
	
 </div>

</body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/126644.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • hostapd的分析[通俗易懂]

    hostapd的分析[通俗易懂]Hostapd的功能就是作为AP的认证服务器,负责控制管理stations(通常可以认为带无线网卡的PC)的接入和认证。通过Hostapd可以将无线网卡切换为AP/Master模式,通过修改配置文件,可以建立一个开放式的(不加密)的,WEP,WPA或WPA2的无线网络。并且通过修改配置文件可以设置无线网卡的各种参数,包括频率,信号,beacon包时间间隔,是否发送beacon包,如果响应探针请求

  • jmespath(2)投影Projections「建议收藏」

    jmespath(2)投影Projections「建议收藏」投影投影是JMESPath的关键特性之一。它允许您将表达式应用于元素集合。有五种投影:列表投影切片投影对象投影展平投影过滤投影处理投影需要注意的点投影分为两个步骤。左侧(LHS)创建一

  • sftp使用方法_sftp服务

    sftp使用方法_sftp服务参考: https://baike.baidu.com/item/sftp参考:https://www.jianshu.com/p/64d571913185    要谈sftp(SSHFileTransferProtocol),首先要谈ftp(FileTransferProtocol),大家都知道ftp是文件传输协议,它基于tcp协议,可以用来发送文件。刚开始学web开发的时候,接…

  • linux终端定时器实验报告,定时器实验报告.doc

    linux终端定时器实验报告,定时器实验报告.doc定时器实验报告实验六 定时器/计数器一、实验目的⒈ 学会8253芯片和微机接口的原理和方法。掌握8253定时器/计数器的工作方式和编程原理。二、实验内容用8253的0通道工作在方式3,产生方波。三、实验接线图四、编程指南⒈ 8253芯片介绍8253是一种可编程定时/计数器,有三个十六位计数器,其计数频率范围为0-2MHz,用+5V单电源供电。8253的功能用途:延时中断 实时时钟可编程频率发…

  • 超详细,手把手 教你 SQLyog 安装教程[通俗易懂]

    超详细,手把手 教你 SQLyog 安装教程[通俗易懂]1.点击SQLyog.exe,如下图2.点击ok,如下图3.点击下一步4.接收协议,点击下一步5.下一步6.更改安装路径,点击安装7.下一步,完成8.注册,需要密钥,名字随意密钥:dd987f34-f358-4894-bd0f-21f3f04be9c19.注册完成,如下图9.新建连接,并随意起个名字10.输入密码,连接数据库11.连接成功之后,就可以使用了…

  • JSP简介

    JSP简介JSP简介

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号