Ajax 비동기 대화
：
$("#txt").blur(function(){
$.ajax({
url:"TestServlet",
type:"get",
data:{"uname":$("#txt").val()},
success:function(recvdata){
alert(recvdata)
}
})
})
===TestServlet
@WebServlet("/TestServlet")
public class TestServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.
String uanem=request.getParameter("uname");
//2.
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
out.println(uanem+" ！OK");// print(), println()
}
2.JSON(JavaScript Object Notation,JS 대상 약보)은 경량급 데이터 교환 형식 이다. 이 는 ECMAScript(유럽 컴퓨터 협회 가 제정 한 js 규범)의 키 집합 을 바탕 으로 프로 그래 밍 언어 에 완전히 독립 된 텍스트 형식 으로 데 이 터 를 저장 하고 표시 합 니 다. 간결 하고 뚜렷 한 차원 구 조 는 JSON 을 이상 적 인 데이터 교환 언어 로 만 들 었 다. 사람 이 읽 고 쓰기 쉬 우 며 기계 적 으로 해석 하고 생 성 하기 쉬 우 며 네트워크 전송 효율 도 효과적으로 향상 시킨다. js 의 대상 과 배열 로 구 성 된 데이터 구조 입 니 다. var obj 1={"username":"장삼",이메일:"[email protected]"} var obj 2={"username":"이사",이메일:"[email protected]"} var arr=[obj1,obj2] //json 표현 var users={"user":[{"username":"장삼",이메일:"[email protected]"},{"username":"이사"이메일:"[email protected]"}], "manger":[]} //장 시 성 var addr={ "성":["흑룡강성","길림성","요녕성".....], "시":[{"흑룡강성":["하 얼 빈","모란 강"...]},{"길림성":[시,,,]},] "구":..... } ==앞 배경 대화 상대 （클 라 이언 트 가 json 을 분석 할 수 있 기 때문에 서버 반환 대상 은 json 으로 전환 해 야 정상적으로 표시 할 수 있 습 니 다) json jar 가방 을 빌려 처리 할 수 있 습 니 다. 1)가방 안내 commons-beanutils-1.8.2.jar commons-collections-3.2.1.jar commons-lang-2.5.jar commons-logging-1.1.1.jar ezmorph-1.0.6.jar json-lib-2.4-jdk15.jar 2)대상 을 제 이 슨 형식 으로 변환 JSONObject jsonObj=JSONObject.fromObject(user); //시범 을 보이다
：
$("#txt").blur(function(){
$.ajax({
url:"TestJsonServlet",
cache:false,
type:"get",
data:{"uname":$("#txt").val()},
dataType:"json",
success:function(recvdata){
$("#userMenu").append("<li>"+recvdata.username+"</li>")
}
})
})
@WebServlet("/TestJsonServlet")
public class TestJsonServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
UserInfo user=new UserInfo();
user.setUserid(100);
user.setUsername(" ");
user.setPassword("12345");
user.setRole(" ");
response.setContentType("text/html;charset=utf-8");
JSONObject jsonObj=JSONObject.fromObject(user); // Json
response.getWriter().print(jsonObj.toString());*/
//String user="{\"id\":100,\"username\":\" \",\"password\":\"12345\"}" ;
//response.getWriter().print(user);
}==앞 배경 대화 대상 목록 JSONarray 를 사용 하여 목록 을 json 형식 으로 변환 합 니 다. JSONArray jsonarr=JSONArray.fromObject(list);//목록 을 json 형식 으로 변환 //시범 을 보이다
@WebServlet("/TestJsonServlet2")
public class TestJsonServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List list=new ArrayList();
UserInfo user=new UserInfo();
user.setUserid(100);
user.setUsername(" ");
user.setPassword("12345");
user.setRole(" ");
UserInfo user2=new UserInfo();
user2.setUserid(102);
user2.setUsername(" ");
user2.setPassword("12345");
user2.setRole("VIP");
list.add(user);
list.add(user2);
list.add(user);
response.setContentType("text/html;charset=utf-8");
JSONArray jsonarr=JSONArray.fromObject(list);// json
response.getWriter().print(jsonarr);
} ：
$("#txt").blur(function(){
$.ajax({
url:"TestJsonServlet2",
cache:false,
type:"get",
data:{"uname":$("#txt").val()},
dataType:"json",
success:function(recvdata){
// $("#userMenu").append("<li>"+recvdata.username+"</li>")
$.each(recvdata,function(k,user){
$("#userMenu").append("<li>"+user.userid+":"+user.username+","+user.role+"</li>")
})
}
})
})
3.ajax 의 작 동 원리//XML HttpRequest 대상 은 앞 배경 데이터 교환 에 사 용 됩 니 다.
// ， servlet ---ajax
var obj=document.getElementById("btn");
var xmlhttp;
obj.onclick=function(){
//XMLHttpRequest ie new ActiveXObject("Microsoft.XMLHTTP")
if(window.XMLHttpRequest){// ie
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//
if(xmlhttp){
xmlhttp.onreadystatechange=f1;// 1,2,3，4
//post
//xmlhttp.open("post","TestServlet",true);// servlet
//xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8")
//xmlhttp.send("uname="+document.getElementById("txt").value) //
//get
xmlhttp.open("get","TestServlet"+"?uname="+document.getElementById("txt").value,true);// servlet
xmlhttp.send(null)
}else{
alert("XMLHttpRequest ")
}
}
// ：
function f1(){
// alert(" "+xmlhttp.readyState)// 1 open() ,2 send() ,3 ，4
//alert(" "+xmlhttp.status)
if(xmlhttp.readyState==4&&xmlhttp.status==200){
alert(" ："+xmlhttp.responseText)
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
검색 사이트를 만들었으므로 정리해 보았습니다 1■목차 · 처음에 · 사이트 구성 · DB 구성 ・테이블 내용 ・급제점 ■ 처음에 Jsp·서블릿을 학습해, 뭔가 만들려고 생각했기 때문에 스포츠 짐의 검색 사이트를 만들어 보았다. 현재의 스포츠 체육관 검색 사이트는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
