Ajax 학습 노트 01 - 데이터 비동기 상호작용 간단하게 실현
7666 단어 JavaScript자바jqueryAjax
①. demo - 1: 간단 한 데이터 세그먼트 형식 으로 프론트 페이지 에 되 돌려 줍 니 다.
페이지 코드: index. html
<!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="js/verify.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
</script>
<title> </title>
</head>
<body>
ajax ， ：<br/>
<!--
<form action="AjaxServer" method="post">
：<input type="text" name="name"/>
<input type="submit" value=" "/>
</form>
-->
<!--ajax ， -->
<!--ajax name ， id -->
：<input type="text" id="userName"/>
<input type="button" value=" " onclick="verify()"/>
<!-- div ，id dom -->
<div id="result"></div>
</body>
</html>
배경 servlet 코드:
1. AjaxServer - out. println () 형식 으로 데스크 톱 에 데 이 터 를 출력 합 니 다. 페이지 를 새로 고 치 는 것 이 아 닙 니 다.
Import…
/**
* Created by IntelliJ IDEA.
* User:
* Date: 2011-11-16
* Time: 15:35:55
* Alt+enter
* To change this template use File | Settings | File Templates.
*/
public class AjaxServer extends HttpServlet{
@Override
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
// , getWriter
httpServletResponse.setCharacterEncoding("utf-8");
httpServletResponse.setContentType("text/html;charset-utf-8");
PrintWriter out = httpServletResponse.getWriter();
//1.
String old = httpServletRequest.getParameter("name"); //name js url
// String name = new String(old.getBytes("iso8859-1"),"utf-8");
String name = URLDecoder.decode(old,"UTF-8");
System.out.println(" "+old);
System.out.println(" "+old);
//2.
if(name==null||name.length()==0){
out.println(" ");
}else{
//3.
if(name.equals("guangpeng")){
//4 . ， ，
out.println(" "+name+"!");
} else{
out.println(name+"--11 ， ！");
}
}
}
@Override
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}
}
JS 파일 코드:
①. Jquery 를 이용 하여 ajax 와 배경 서버 의 상호작용 을 간단하게 실현 한다.
/ / 사용자 이름 검사 방법 정의
function verify(){
// var url = "AjaxServer?name="+encodeURI(encodeURI($("#userName").val()));
/*
* jquery
* var userName = $("#userName").val();
* */
//jquery jquery ，
var jqueryObj = $("#userName");
//
var userName = jqueryObj.val();
// alert(userName);
//2. servlet
// jquery XMLHTTPrequest
$.get("AjaxServer?name="+userName,null,callback);
//
}
// ，
function callback(data){
//3.
// alert(" ！！！");
//alert(data);
$("#result").html(data);
//4.
}
Demo 1 은 데이터 가 문자열 형식 으로 서버 와 데이터 상호작용 을 할 수 있 습 니 다. 사실 js 파일 도 주석 을 제거 하고 jquery 체인 프로 그래 밍 사상 을 이용 하여 verity 1. js 라 고 간단하게 쓸 수 있 습 니 다.
function verify(){
var userName = $("#userName").val();
$.get("AjaxServer?name="+userName,null,function(data){
$("#result").html(data);
});
}
Demo 2: XmlHttpRequest 대상 을 사용 하여 ajax 비동기 데이터 인 터 랙 션 을 진행 합 니 다.
XmlHttpRequest 대상 을 사용 하여 ajax 비동기 데이터 인 터 랙 션 을 진행 합 니 다: html 페이지 와 servlet 는 같 습 니 다. 페이지 에 도 입 된 js 파일 만 업데이트 하면 됩 니 다.
/ / 이 방법 은 XmlHttpRequest 대상 을 사용 하여 ajax 비동기 데이터 인 터 랙 션 을 진행 합 니 다.
var xmlhttp;
function verify(){
//var xmlhttp;
// dom
var userName = document.getElementById("userName").value;
if(window.XMLHttpRequest){
// firefox，mozillor opera safari ie7.8
xmlhttp = new XMLHttpRequest();
// bug , xml
if(xmlhttp.overrideMimeType){
xmlhttp. overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
// ie6,5
// XMLHttpRequest ， js
// ， ，
var activeNeme = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0; i<activeNeme.length; i++){
try{
xmlhttp = new ActiveXObject(activeNeme[i]);
break;
}catch(e){
}
}
}
if(!xmlhttp){
alert("XMLHttpRequest ");
}else{
alert(xmlhttp);
}
//2.
// ， ， ，
xmlhttp.onreadystatechange = callback;//
//3. Get
// http ， http ， get post
// url ，get url
// ，true
// xmlhttp.open("GET","AjaxServer?name="+userName, true);
//4. ，
// ，send
// ，send
//xmlhttp.send(null);
//post
xmlhttp.open("POST","AjaxServer", true);
// http
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//post
xmlhttp.send("name="+userName);
}
//
function callback(){
//5.
// 4 ,XMLHttpRequest 0-4
if(xmlhttp.readyState == 4){
// http
if(xmlhttp.status == 200){
//
//
var responseText = xmlhttp.responseText;
//
var divNode = document.getElementById("result");
divNode.innerHTML = responseText;
}
}
}
js 의 측면 에서 ajax 데이터 의 상호작용 원 리 를 이해 하 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
