您的位置：首页 > 理论基础 > 计算机网络

xmlhttprequest 原生使用

2016-05-23 06:29 489 查看

package com.ajax.web;

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

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

import com.ajax.dao.Dao;

public class ShwServlet extends HttpServlet {

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

response.setContentType("text/html;charset=gbk");
PrintWriter out = response.getWriter();

String uname = request.getParameter("uname");

String name = new String(uname.getBytes("iso-8859-1"), "gbk");

// Dao dao = new Dao();
// List<String> list = dao.find(name);

StringBuffer sf = new StringBuffer();

for (String s : list) {
sf.append("<div onmouseover='over(this)' " +
"onclick='myclick(this)'  " +
"onmouseout='out(this)'>"+s+"</div>");
}
out.print(sf.toString());
out.close();
}

}

////这是我的ajax脚本文件

var req =null; //声明ajax的核心对象，从是没有初始化

//响应jsp页面中的函数
function show(){

//取到页面中的文本框控件
var name = document.getElementById("name");
//取到控件中的值

var val = name.value;

if(val==""){
mydiv.innerHTML="";
return;
}else{
//封装一个请求servlet路径的url地址，同时把参数以url重写的方式传递
var url = "abc?uname="+val;
sendRequest(url);
}

}

//编写方法，根据不同的浏览器创建核心对象 XMLHttpRequest，

function  createReq(){

//非IE
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
req = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}

}

//利用核心对象和后台交互
function sendRequest(url){

//准备交互
//1、调用方法初始化核心对象
createReq();
//2、准备建立异步请求
//req.open(选择servlet的处理方式,地址,同步还是异步);
req.open("GET",url,true);
//3、编写委托，委托一个方法来处理请求的返回结果
//req.onreadystatechange =被委托的函数名称
req.onreadystatechange = process;
//4、真正的发送请求到后台
req.send(null);
}

//当返回值来了以后，由被委托的函数来处理
function process(){

//首先判断异步是否成功与后台交互

//req.readystate==4  表示，前台与后台，成功交互了一次
if(req.readystate==4){
//交互成功以后，还要判断请求是否成功处理
if(req.status==200){
//定制一个变量，获得后台的返回值
var res = req.responseText;
//req.responseText 它可以获得servlet中，流所输出的内容
mydiv.innerHTML = res;
}

}

}

//处理悬停事件
function over(obj){
obj.style.backgroundColor="lime";
}
function out(obj){
obj.style.backgroundColor="white";
}

function myclick(obj){

var val = obj.innerHTML;
document.getElementById("name").value=val;
mydiv.innerHTML="";
}

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<html>
<head>
<script type="text/javascript" src="js/script.js"></script>
</head>

<body>
<table>
<Tr>
<Td>
<input type="text" name="name" onkeyup="show()"/>
</Td>
</Tr>
<Tr>
<Td>
<div id="mydiv" style="border-style: groove"></div>
</Td>
</Tr>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航