初学者---- 学习ajax

最新推荐文章于 2024-07-28 17:16:30 发布

Lin1063178923

最新推荐文章于 2024-07-28 17:16:30 发布

阅读量441

点赞数

分类专栏： Java 前端文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/Lin1063178923/article/details/41018185

版权

Java 前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

刚刚学习了ajax，初步整理一下知识点

1ajax是通过XmlHttpRequest对象和服务器进行通信的，它的优点是不用刷新页面就可以和服务器通信

2ajax三种传输数据的格式：

（1）xml :xml难解析，笨重，但是在全球上通用

（2）hmtl :不用解析可以直接放到文档中，通常用于更新很小一部分，但是不便于大量的数据，而且需要拼装

（3）JSON：小巧，又面向对象的特点，有很多第三方的jar包可以把json对象转换成为json字符串

3使用jquery完成对ajax的操作

（1）load方法可以用于hmtl中的任何一个元素，比如 a ,div 元素，把结果直接加为到对应节点的子元素，通常用load加载html元素

var obj=...

var ur =。。

var arg ={"key ":"value"}

load(url,arg)

(2) $.get(url,arg ,function(data){

})

url :ajax请求目标的urll

arg：传递参数，json格式

data:ajax响应成功后的对象，返回对象可能是xml ,json hmtl

(3) $.get(url,arg ,function(data){

},"JSON")

data:ajax响应成功后的JSON对象

(4) $.post(url,arg ,function(data){

},"JSON")

(5) $.getJSON(url,arg ,function(data){

})

4下面粘贴使用ajax load方法的代码，达到局部刷新，至于helloajax.txt文件，内容自己写即可

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'testAjax.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="script/jquery-1.6.2.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url =this.href;

$("#content").load(url);

return false;
});
});
</script>
</head>

<body>
<a href="helloajax.txt"> hello ajax</a>
<div id="content"></div>
</body>
</html>

二：使用ajax jquery servlet 进行检验用户名

（1）jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'v.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery-1.6.2.js"></script>
<script type="text/javascript">
$(function(){

$(":input[name='username']").change(function(){

var val=$(this).val();
val=$.trim(val);
if(val!=""){
var url="${pageContext.request.contextPath}/valiateUsername";
var arg={"username":val,"date":new Date()};
$.post(url,arg,function(data){
$("#message").html(data);
});
}
});
});

</script>
</head>

<body>
<form name="form1" id="form1">

用户名：<input type="text" name="username" id="username"/>
<br>
<div id="message"></div>
<br>
<input type="submit" value="注册"/>
<br>
</form>
</body>
</html>

(2)servlet代码

package com.lin.text;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import java.util.List;

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

public class V extends HttpServlet {
	public void destroy() {
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}

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

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

		 List<String> usernames =Arrays.asList("AAA","BBB","CCC");
		   String username=request.getParameter("username");
		   System.out.print(username);
		   String result =null;
		   if(usernames.contains(username)){
			   result="<font color='red'>regist</font>";
		   }else{
			   result="<font color='red'>no</font>";
		   }
		   response.setContentType("text/html");
		   response.setCharacterEncoding("utf-8");
		   response.getWriter().print(result);
	}
	public void init() throws ServletException {
		// Put your code here
	}

}

（3）需要注意的是 servlet中url地址一定要和ajax中的servlet的一致