Ajax

最新推荐文章于 2023-06-09 00:24:43 发布

我可能是个假开发

最新推荐文章于 2023-06-09 00:24:43 发布

阅读量408

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/CSDN_GIA/article/details/54710451

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

Ajax

一、什么是Ajax

Ajax：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML

不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法

Ajax：只刷新局部页面的技术

l JavaScript：更新局部的网页

l XML：一般用于请求数据和响应数据的封装

l XMLHttpRequest对象：发送请求到服务器并获得返回结果

l CSS：美化页面样式

l 异步：发送请求后不等返回结果，由回调函数处理结果

JavaScript中XMLHttpRequest对象是整个Ajax技术的核心，它提供了异步发送请求的能力

构造方法：

不同浏览器，甚至相同浏览器的不同版本，获取该对象的方式是不同的。

var xmlhttp;
if (window.XMLHttpRequest) 
	{
	// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
	} else {
		// code for IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}

方法：

open() "get|post" ，"url?name=tom" ，"true|false"

send() 发送请求。可以带参数或 null

setRequestHeader()

属性

readyState：类型short；只读

responseText：类型String；只读

responseXML：类型Document；只读

status：类型short；只读

事件处理器

onreadystatechange

二、常用方法

方法名	说明
open(method,URL,async)	建立与服务器的连接 method参数指定请求的HTTP方法,典型的值是GET或POST URL参数指请求的地址 async参数指定是否使用异步请求，其值为true或false
send(content)	发送请求 content参数指定请求的参数
setRequestHeader(header,value)	设置请求的头信息

三、常用属性

onreadystatechange：指定回调函数

readyState: XMLHttpRequest的状态信息

就绪状态码	说明
0	XMLHttpRequest对象没有完成初始化即：刚刚创建。
1	XMLHttpRequest对象开始发送请求调用了open方法，但还没有调用send方法。请求还没有发出
2	XMLHttpRequest对象的请求发送完成 send方法已经调用，数据已经提交到服务器，但没有任何响应
3	XMLHttpRequest对象开始读取响应，还没有结束收到了所有的响应消息头，但正文还没有完全收到
4	XMLHttpRequest对象读取响应结束一切都收到了

status：HTTP的状态码

状态码	说明
200	服务器响应正常
400	无法找到请求的资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误

l responseText：获得响应的文本内容

l responseXML：获得响应的XML文档对象 documednt

注：就绪状态是4而且状态码是200，才可以处理服务器数据

使用Ajax验证用户名是否存在实现步骤：

1、使用文本框的onBlur事件

2、使用Ajax技术实现异步交互

a)        创建XMLHttpRequest对象

b)        通过 XMLHttpRequest对象设置请求信息

c)        向服务器发送请求

d)        创建回调函数，根据响应状态动态更新页面

case：

myJS.js:

function getXMLHttpRequest(){
	var xmlhttp;
		if (window.XMLHttpRequest) 
			{
			// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
			} else {
					// code for IE6, IE5
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
					}
		return xmlhttp;
}

1.jsp:

<script type="text/javascript">
	window.onload = function() {
		//1、获取XMLHttpRequest对象
		var req = getXMLHttpRequest();
		
		//4、处理响应结果
		req.onreadystatechange = function(){
			//alert(req.readyState);
			if(req.readyState==4){
				//alert(req.status);//查看服务器端响应状态
				if(req.status==200){//服务器响应一切正常
					alert(req.responseText);
				}
			}
		}
		//2、建立一个连接
		req.open("get","${pageContext.request.contextPath }/servlet/servletDemo1");
		//3、发送请求
		req.send(null);
		
		
	}
</script>

ServletDemo1:

package com.itheima.servlet;

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

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

public class ServletDemo1 extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		PrintWriter out = response.getWriter();
		out.print("hello servlet");
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

}

reg.jsp:

<script type="text/javascript" src="${pageContext.request.contextPath }/js/myJS.js"></script>
<title>Insert title here</title>
	<script type="text/javascript">
/* 		function ckName(){
			//获取用户名
			var name = document.getElementsByTagName("input")[0];
			//创建XMLHttpRequest对象
			var xhr = getXMLHttpRequest();
			//处理结果
			xhr.onreadystatechange = function(){
				if(xhr.readyState==4){//请求一切正常
					if(xhr.status==200){//服务器响应一切正常
						//alert(xhr.responseText);//得到响应结果
						var msg = document.getElementById("msg");
						if(xhr.responseText=="true"){
							msg.innerHTML =  "<font color='red'>用户名已存在</font>";
							//msg.innerText = "<font color='red'>用户名已存在</font>";
						}else{
							msg.innerHTML = "可以使用";
						}
					}
				}
			}
			
			//创建连接
			xhr.open("get","${pageContext.request.contextPath }/servlet/ckNameServlet?name="+name.value);
			//发送请求
			xhr.send(null);
		} */
		
		window.οnlοad=function(){
			var nameElement = document.getElementsByName("userName")[0];
			nameElement.onblur = function(){
				var name = this.value;//this等价于nameElement
				//创建XMLHttpRequest对象
			var xhr = getXMLHttpRequest();
			//处理结果
			xhr.onreadystatechange = function(){
				if(xhr.readyState==4){//请求一切正常
					if(xhr.status==200){//服务器响应一切正常
						//alert(xhr.responseText);//得到响应结果
						var msg = document.getElementById("msg");
						if(xhr.responseText=="true"){
							msg.innerHTML =  "<font color='red'>用户名已存在</font>";
							//msg.innerText = "<font color='red'>用户名已存在</font>";
						}else{
							msg.innerHTML = "可以使用";
						}
					}
				}
			}
			
			//创建连接
			xhr.open("get","${pageContext.request.contextPath }/servlet/ckNameServlet?name="+name.value);
			//发送请求
			xhr.send(null);
			}
			
		}
	</script>
</head>
<body>
		用户名：<input type="text" name="userName" /><span id="msg"></span><br/>
		密码<input type="password" name="pwd"/><br/>
</body>

四、案例：实现邮箱验证

my.js:

function getXMLHttpRequest(){
	var xmlhttp;
		if (window.XMLHttpRequest) 
			{
			// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
			} else {
					// code for IE6, IE5
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
					}
		return xmlhttp;
}

servlet:

五、案例：搜索

1、编写显示数据的容器div

2、实现ajax响应数据

//创建XMLHttpRequest对象

//通过事件调用回调函数处理响应结果，

//创建一个服务器连接

//发送请求

servlet:

case:

<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/my.js">
	
</script>
<script type="text/javascript">
	
	window.onload = function(){
		//得到搜索框对象
		var searchElement = document.getElementById("name");
		//得到DIV元素
		var div = document.getElementById("context1");
		
		searchElement.onkeyup = function(){//给文件框注册按键弹起事件
			//获取文本框的值
			var name = this.value;
			//如果文本框不没有数据时，把div隐藏，且不向服务器发送请求
			if(name==""){
				div.style.display="none";
				return;
			} 
			
			//获得xhr对象
			var xhr = getXMLHttpRequest();
			
			//处理结果
			xhr.onreadystatechange = function(){
				if(xhr.readyState==4){//请求一 切正常
					if(xhr.status==200){//服务器响应一切正常
						var str = xhr.responseText;//得到服务器返回的数据
					
						var ss = str.split(","); // 把字符串 1001，1002，1003 截成数组
						var childDivs = "";
						//循环把数据放入小的div中
						for(var i=0;i<ss.length;i++){
							childDivs+="<div οnclick='writeText(this)' οnmοuseοver='changeBackground_over(this)' 
							οnmοuseοut='changeBackground_out(this)'>"+ss[i]+"</div>";//把数组中的每个元素放到div中
						}
						
						div.innerHTML= childDivs;//把多个childDivs（div）放入列表div中
						div.style.display="block";//把列表隐藏
					}
				}
			}
			
			xhr.open("get","${pageContext.request.contextPath}/servlet/searchBookAJAXServlet
					?name="+name+"&time="+new Date().getTime());
			
			xhr.send(null);
		}
	}
	
	//鼠标悬浮时，改变背景色
	function changeBackground_over(div){
		div.style.backgroundColor = "gray";
	}
	//鼠标离开时，恢复背景色
	function changeBackground_out(div){
		div.style.backgroundColor = "";
	}
	
	//填充文本到搜索框
	function writeText(div){
		//得到搜索框
		var searchElement = document.getElementById("name");
		searchElement.value = div.innerHTML;//把div中的文本添加到搜索框中
		div.parentNode.style.display="none";//把context1的div隐藏
	}
</script>

六、JSON对象

var arr =["","",123,true];

case：

<script type="text/javascript">
	/*
	java语言创建的类
	public class person(){
		private String name;
		private int age;
		
		public void show(){
			
		}
	}
	
	*/
	
	
	/* function Person(){
		var name="tom";//声明一个局部变量
		this.age=10;//声明一个成员变量
		this.show=function(){
			alert(name);
		}
	}
	
	var p = new Person();
	document.write(p.name);
	document.write(p.age);
	p.show(); */
	
	//创建一个json对象
	var pp = {name:"tom",age:18};
	document.write(pp.age);
	
	var ppp=[{name:"tom",age:18},{name:"jerry",age:19}];
	document.write(ppp[1].name);
	
</script>

test：

package json;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.junit.Test;

import com.itheima.domain.Book;
import com.itheima.util.C3P0Util;

public class JsonTest {
	//使用JSONObject封装对象类型数据
	@Test
	public void test1(){
		Book b = new Book();
		b.setId("1001");
		b.setName("xyj");
		b.setPrice(20);
		
		String s = JSONObject.fromObject(b).toString();
		System.out.println(s);
	}
	
	
	@Test //使用JOSNArray封装list<Book>对象数据
	public void test2(){
		List<Book> list = new ArrayList<Book>();
		Book b1 = new Book();
		b1.setId("1001");
		b1.setName("xyj");
		b1.setPrice(20);
		
		Book b2 = new Book();
		b2.setId("1001");
		b2.setName("xyj");
		b2.setPrice(20);
		
		Book b3 = new Book();
		b3.setId("1001");
		b3.setName("xyj");
		b3.setPrice(20);
		
		list.add(b1);
		list.add(b2);
		list.add(b3);
		
		String s = JSONArray.fromObject(list).toString();
		System.out.println(s);
	}
	
	
	@Test  //使用JsonConfig去除不要的字段的数据
	public void test3() throws SQLException{
		QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
		List<Book> list = qr.query("select * from book", new BeanListHandler<Book>(Book.class));
		
		JsonConfig jc = new JsonConfig();
		//过滤掉不需要的数据
		jc.setExcludes(new String[]{"pnum","description","category","id"});
		String s = JSONArray.fromObject(list,jc).toString();
		System.out.println(s);
		
	}

}

我可能是个假开发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax

Ajax一、什么是AjaxAjax：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法Ajax：只刷新局部页面的技术l JavaScript：更新局部的网页l
复制链接

扫一扫