javascript_ajax_json实验

最新推荐文章于 2023-04-23 11:37:26 发布

Super小智_jz

最新推荐文章于 2023-04-23 11:37:26 发布

阅读量396

点赞数

分类专栏：个人感悟文章标签： ajax javascript json

本文链接：https://blog.csdn.net/u013103281/article/details/42918405

版权

个人感悟专栏收录该内容

10 篇文章 0 订阅

订阅专栏

最近在学习ajax，也是菜鸟级别，每天做做实验，学习一两个知识点，今天做了一个ajax的小实验，来阐述一下这里边的原生态的关键点。

前台js文件：
----------------------------------------------------------------------------------------------------------------------------------
function check(){
var name =document.getElementById("name1").value;
if(name ==""){
document.getElementById("myspan").innerHTML ="";
}else{
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");
}
xmlhttp.onreadystatechange=function()
{

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var res =JSON.parse(xmlhttp.responseText);
if(res.code==1){
document.getElementById("myspan").innerHTML="<font color ='red'>×"+ res.msg+"</font>";
document.getElementById("name1").focus();
document.getElementById("name1").select();
}else{
document.getElementById("myspan").innerHTML="<font color ='green'>√"+ res.msg+"</font>";

}

}
}
xmlhttp.open("post","servlet/ajax",true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send("name="+name);
}
}
----------------------------------------------------------------------------------------------------------------------------------
前台页面：
----------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="myjs.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ajax测试页面</title>
</head>
<body>

<div align="center"><h2>AJAX</h2>
<table>
<tr>
<td>
用户名：<input type="text" name="name" id="name1" οnchange="check()" />
<span id="myspan"></span>
</td>
</tr>
</table>
</div>
</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------
后台servlet代码：
----------------------------------------------------------------------------------------------------------------------------------
package com.jz.ajax;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.Writer;

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

public class AjaxMoniter extends HttpServlet{

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

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String name =request.getParameter("name");
String msg;
int code =0;
String res ="";
if(name.equals("admin")){
msg="对不起，用户已被注册！";
code =1;
res="{\"code\":"+"\""+code+"\""+",\"msg\":"+"\""+msg+"\""+"}";
out.print(res);
}else{
msg ="用户名可以使用！";
res="{\"code\":"+"\""+code+"\""+",\"msg\":"+"\""+msg+"\""+"}";
out.print(res);
}

}

}

---------------------------------------------------------------------------------------------------------------

web.xml :

---------------------------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="gbk"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0"
metadata-complete="true">
<servlet>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>com.jz.ajax.AjaxMoniter</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/servlet/ajax</url-pattern>
</servlet-mapping>

<welcome-file-list>
<welcome-file>Test.html</welcome-file>
</welcome-file-list>
</web-app>

------------------------------------------------------------------------------------------

在以上代码中，后台使用了json数据格式传输，将业务逻辑执行完毕并返回相应的字符串，后台字符串拼接需要格外小心，如果不是按照严格的json格式拼接的话前台会出现解析失败的情况，就是调用JSON.parse(xmlhttp.responseText)时候无法将后台返回回来的字符串转换成为JSON对象，也就无法实现相应的功能。