ajax--案例

最新推荐文章于 2024-04-23 22:35:01 发布

QL_7769

最新推荐文章于 2024-04-23 22:35:01 发布

阅读量446

点赞数 2

分类专栏： ajax简单实用 ajax案例文章标签： javascript html ajax

本文链接：https://blog.csdn.net/lxmlovezql/article/details/109155951

版权

ajax简单实用同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

ajax案例

1 篇文章 0 订阅

订阅专栏

Ajax: 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

一、js使用Ajax的步骤：

1.创建更新局部信息的对象，

2.通过该对象调用加载数据的方法

3.开启Ajax服务

4.发送数据

ajax生命周期：

1.:所谓 Ajax 的生命周期，其实就是方法 onreaystatechange()中对应的状态吗的一个变化流程，即是 ajax 的生命周期。

2.从程序运行的角度来分析，ajax 的声明周期为:

第一步：创建ajax对象

第二步：调用 open()方法，开启 Ajax 请求服务

第三步：调用 send()方法

第四步：通过 cyAjax.responseText 接收来自服务器端的数据

第五步：接收来自服务器端返回数据(用 responseText 属性)

3.从状态码变化角度分析

Ajax 在执行请求和响应的过程中，其状态会发生五次变化，这五次变
化分别对应的状态码为：
0 (未初始化)：(XMLHttpRequest)对象已经创建，但还没有调用 open()方法。
1 (载入)：已经调用 open() 方法，但尚未发送请求。
2 (载入完成)：请求已经发送完成。
3 (交互)：可以接收到部分响应数据。
4 (完成)：已经接收到了全部数据，并且连接已经关闭。

简单案例：index.jsp

function testAjax(){
		/* 用JS使用Ajax的步骤： */
		/* 1.创建更新局部信息的对象 */
		var cyAjax = new XMLHttpRequest();
		/* 2.通过该对象调用加载数据的方法 */
		cyAjax.onreadystatechange = function(){
			var divData = document.getElementById("divID");
			//responseText该属性，是把服务器中数据，显示给前台页面
			divData.innerHTML = cyAjax.responseText;
		}
		/* 3.开启Ajax服务
		*3.1:method:请求方式：get/post
		3.2:url:请求后台控制器类URL（访问路径）
		3.3：async：Asynchronized，是同步还是异步，值为true（异步）或false（同步）
		*
		 */
		cyAjax.open("get", "AjaxServlet", true);
		/* 4.发送数据 */
		cyAjax.send(null);
	}
	</script>
  </head>
  <body>
   		<input type="button" value="测试Ajax" onclick="testAjax()">
   		<div id="divID" style="width: 100px;height: 100px;border: solid 1px;">
   		</div>
  </body>

AjaxServlet.java

package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		//给客户端响应一段数据
		PrintWriter writer = response.getWriter();
		//服务器给浏览器响应数据时，是以文件件输出流方式，把数据传递给客户端
		writer.write("这是通过后台服务器返回给Ajax的内容");
		writer.flush();
		writer.close();
	}
}

简单案例：页面输入用户名和密码，点击登录，后台去数据库查询核对是否正确，将结果展示在页面上，

pojo:实体层

Dao:持久层

servlet:控制层

//获取页面传输过来的数据,Integer.parseInt()将获取过来的值转换为Int类型
		String name= URLDecoder.decode(request.getParameter("uname"),"utf-8");
		int pswd =Integer.parseInt(request.getParameter("upw"));
		System.out.println(name+" "+pswd);
		try {
			//selectName(String string):自定义方法，需要一个String类型的参数，返回一个ResultSet类型的值
			ResultSet rs= new AccountDao().selectName(name);
				rs.next();//判断是否有下一个数据
				ps=rs.getInt(3);
				System.out.println("ps:"+ps);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		//给客户端响应一段数据
		PrintWriter writer = response.getWriter();
		//服务器给浏览器响应数据时，是以文件件输出流方式，把数据传递给客户端
		if(ps==pswd){
			writer.write("成功");
			//flush() 刷新流。
			writer.flush();
			writer.close();
		}else{
			writer.write("失败");
			//flush() 刷新流。
			writer.flush();
			writer.close();
		}

jsp:表示层

  <script type="text/javascript">
  	function ajaxclick(){
  		var uname = document.getElementById("name").value;
  		var upw = document.getElementById("password").value;
  		
		var cyAjax = new XMLHttpRequest();
		cyAjax.onreadystatechange = function(){
			var divData = document.getElementById("divID");
			divData.innerHTML = cyAjax.responseText;
		}
		cyAjax.open("get", "SelectServlet?uname="+encodeURI(encodeURI(uname)+"&upw="+upw, true));
		cyAjax.send(null);
  	}
  </script>
  <body>

    <input type="text" id="name" name="name">
    <input type="password" id="password" name="password">
    <input type="button" value="登录" onclick="ajaxclick()"> 
    <div id="divID">
    
    </div>

案例Post提交：

用 POST 方式提交请求时，需要把请求头信息设置为：
whnAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

写在servlet里面：

//设置编码格式
			request.setCharacterEncoding("utf-8");
			response.setContentType("text/html;charset=utf-8");
			//获取页面传递的数据
			String name = request.getParameter("name");
			String gender = request.getParameter("gender");
			String works = request.getParameter("works");
			
			PrintWriter writer = response.getWriter();
			writer.write("用户名:"+name+"性别:"+gender+"代表作:"+works);
//			writer.write("性别:"+gender);
//			writer.write("代表作:"+works);
			writer.flush();
			writer.close();

jsp:

  	<script type="text/javascript">
  		function ajaxPost(){
  			
  			var name = document.getElementById("nameID").value;
  			var gender = document.getElementById("genderID").value;
  			var works = document.getElementById("worksID").value;
  			
  			//创建Ajax对象
  			var whnAjax = new XMLHttpRequest();
  			
  			/* var wkajax;
  			//在在低版本的浏览器年代时，需要尽心如下判断。但如今，几乎每个浏览器都能支持ajax的请求，所就不需要判断，也能创建对象。
  			if(window.XMLHttpRequest){//是否是火狐浏览器
  				wkajax = new XMLHttpRequest();
  			}else if(window.ActiveXObject){//是否IE浏览器
  				wkajax = new ActiveXObject("Msxml2.XMLHTTP");
  			} */
  			//加载回调函数
  			whnAjax.onreadystatechange = function(){
  				var data = document.getElementById("divID");
  				data.innerHTML = whnAjax.responseText;
  			}
  			//开启服务
  			/* whnAjax.open("post", "AjaxPost?name=王浩楠&pwd=123456"); */
  			whnAjax.open("post", "AjaxPostServlet");
  			/* 
  			给ajax的请求头添加响应属性和值 
  			需要将ajax的请求信息设置为“application/x-www-form-urlencoded”
  			*/
  			whnAjax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  			//发送数据
  			whnAjax.send("name="+name+"&pwd="+gender+"&works="+works);
  		}
  	</script>
  	
  </head>
  <body>
  姓名：<input type="text" id="nameID"><br/>
  性别：<input type="text" id="genderID"><br/>
  代表作品：<input type="text" id="worksID"><br/>
   		<input type="button" value="post方式提交Ajax请求" onclick="ajaxPost()">
   		<div id="divID" style="width: 100px;height: 100px;border: solid 1px;">
   		</div>
  </body>

案例：用 Ajax 读取 xml 文件的数据

xml:

<?xml version="1.0" encoding="UTF-8"?> 
<!--  
XML文件“可扩展标记语言”:(eXtensible Markup Language) 
可以对其中标签进行数量上的增加，就叫“可扩展” 
 --> 
<emp> 
 <name>程勇</name> 
 <gender>男</gender> 
 <age>23</age> 
 <phone>1342223333</phone> 
</emp>

<!-- 脚本语言 --> 
 <script type="text/javascript"> 
  function testXml(){ 
   //创建Ajax对象 
   var ajax = new XMLHttpRequest(); 
   //加载回调函数 
   ajax.onreadystatechange = function(){ 
    var cyData = ajax.responseXML; 
    var result = 
cyData.getElementsByTagName("emp"); 
    for(var i=0;i<result.length;i++){ 
     alert(result[i].innerHTML); 
    } 
   } 
   //开启服务 
   ajax.open("get", "myXmlData.xml"); 
   //发送数据 
   ajax.send(); 
  } 
 </script> 
  </head> 
  <body> 
    <input type="button" value=" 测试 XML 格式数据 " 
onclick="testXml()"> 
  </body>