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)
blank

相关推荐

  • 阻塞与非阻塞的区别verilog_如何理解阻塞和非阻塞

    阻塞与非阻塞的区别verilog_如何理解阻塞和非阻塞简单点说:阻塞就是干不完不准回来,非阻塞就是你先干,我现看看有其他事没有,完了告诉我一声我们拿最常用的send和recv两个函数来说吧…比如你调用send函数发送一定的Byte,在系统内部s

  • 腾讯 OCR 情况

    腾讯 OCR 情况

  • Hmily 源码解析(二)—— Hmily事务工作流程「建议收藏」

    Hmily 源码解析(二)—— Hmily事务工作流程「建议收藏」Hmily源码解析(二)前言这一篇不想谈论Hmily源码的技术实现,而是想在过了一遍hmily的实现后把hmily的工作思路单独地整理出来再进行一次总结。看看能不能进一步有所得。以hmily-demo-springcloud为例,它的实现思路如下。Hmily事务工作流程首先它是基于切面编程来实现分布式事务的操作,及通过日志记录TCC事务的信息以保证最终一致性。前…

  • SQL中SELECT语句详解「建议收藏」

    SQL中SELECT语句详解「建议收藏」本篇文章讲述SQL语句中的SELECT查询语句,以供参考,如有错误或不当之处还望大神们告知。简单查询SELECT-FROM用于无条件查询单张表中的行或列假设有表如图所示查询名字叫‘叶清逸’的记录:select*fromT_USERwhereu_name=’叶清逸’;查询结果:查询一个或多个属性,u_name,u_age,u_scor…

  • 什么叫做公网IP_是不是公网ip

    什么叫做公网IP_是不是公网ip由于公网ip资源匮乏,NAT(地址转换)技术被广泛应用。其好处就是让更多的电脑能够上网,缺点在于你自己搭建了一台服务器。想实现远程访问,如果服务器的地址如果是经过NAT转换后的地址,外网是无法访问到的。这就引出了公网ip和私网ip的概念,可以通过开头的数字来判断ip地址的类型,下面就给大家普及一下。由于私网ip地址仅限于局域网内使用,并且是可以重复的,所以IANA当初划分了一些网段,专供局域网内使用。具体网段如下:10.x.x.x192.168.x.x172.16.x.x-172.3

    2022年10月21日
  • web hosting_hotlines

    web hosting_hotlinesBelowyoullfindalistofthe10BestHostsasreviewedbyconsumersandexperiencedwebmasters. Thefollowingwebhostsarerankedbyprice,serverreliability,popularity,softwareusability,di

发表回复

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

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