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

一、简介

     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 

例子:

页面搭建:


		

评论:

姓名:

内容:

已有评论:

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("
" + username + " :

" + content + "

"); out.flush(); out.close();

jq有三种写法:

第一种:


		

第二种:


		

第三种:

	
		

3.$.post()方法

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

4.$ajax()


 
  
  
  

已有评论:

5.$.getScript()

写一个.js文件

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

' + comment['content'] + '

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

然后建一个网页调用


 
  
  

已有评论:

6.$.getJSON()

在调用json时,需要导入jar

java中的jQuery与Ajax的应用,菜鸟教程_第1张图片

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();
	}

网页:

 

 


 

已有评论:

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




 

已有评论:

你可能感兴趣的:(java)