ajax原生js和jq的两种写法1.原生js写法

80 阅读 0 评论 53 点赞

我是靠谱客的博主兴奋大门，最近开发中收集的这篇文章主要介绍ajax原生js和jq的两种写法1.原生js写法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.原生js写法

步骤:

1.html页面或jsp页面中触发某个事件,调用js方法

2.编写js方法:

a. 创建XMLHttpRequest对象

(1) ie浏览器

(2)非ie浏览器

b.调用open方法

参数一: 提交的方式

get/post

参数二:提交到服务器的url

参数三:true 异步,false同步

get提交方式: xmlHttpRequest.open("get","xxxServlet",true);

post提交方式: xmlHttpRequest.open("post","xxxServlet?name=hctrl",true);

注意: get提交方式,提交的参数写在send方法中,post提交方式参数卸载open方法中

c.给XMLHttpRequest对象注册onreadystatechange事件,判断readyState的值是4,status的值是200,

然后获取服务端传递回来的xml或json或文本,然后dom编程更改html页面或jsp页面的局部内容

d.如果post提交,还要添加消息头

  xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");

e.调用send方法发送请求

get方式:   xmlHttpRequest.send(null);
post方式: xmlHttpRequest.send(name=value&name1=value1...);

post方式传数据到服务器用send方式事项
get方式传送数据到服务的用法:
xmlHttpRequest.open("get","xxxServlet?name=value&name1=value1",true);

实例代码:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="js/login.js"></script>
</head>
<body>
	
	<div align="center">
	
		<table border="1" style="border-collapse: collapse">
		
			<tr>
				<td>键盘</td>
				<td id="td1">详细信息</td>	
			</tr>
			<tr>
				<td>鼠标</td>
				<td id="td2">详细信息</td>
			</tr>
		</table>
	</div>
</body>
</html>

var xmlHttpRequest;
window.onload=function(){
	alert(111);
	func1();
	
	//func2();
	
};

function func1(){
	
	var td1_ele = document.getElementById("td1");
	td1_ele.onclick=(function(){
		
		func3();
});
	
	
}

function func3(){
	
	//1.创建XMLHttpRequest对象
	createObj();
	
	//2.调用open方法
	xmlHttpRequest.open("post","showInfoServlet",true);
	xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");
	
	//3.注册事件
	xmlHttpRequest.onreadystatechange=function(){
			
		if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
			
			var div1_ele = document.getElementById("td1");
			alert(xmlHttpRequest.responseText);
			div1_ele.innerHTML=xmlHttpRequest.responseText;
			
		}
	
	};
	
	//发送请求
	xmlHttpRequest.send("name=hctrl");
	
	
}

function createObj(){
	
	if(window.XMLHttpRequest){
		//非ie浏览器
		xmlHttpRequest=new XMLHttpRequest();
	}else{
		//ie浏览器
		xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
	}
		
}

showInfoServlet

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		//获取js传递过来的参数
		String name = request.getParameter("name");
		
		//设置返回值类型
		response.setContentType("text/html;charset=utf-8");
		
		//创建输出流
		PrintWriter out = response.getWriter();
		
		out.print(name);
		out.flush();
		out.close();
		
	}