1. Ajax 소개
Ajax는 (비동기 JavaScript 및 XML)의 약어로 간주되며 브라우저가 새로 고치지 않고 서버와 통신 할 수있는 기술을 AJAX라고합니다.
예 : Baidu 검색, 실시간 맵 등 Ajax 모델에서 데이터는 클라이언트와 서버간에 독립적으로 전송됩니다. 서버는 전체 페이지를 새로 고치지 않고 데이터를 업데이트 할 수 있습니다.
2. Ajax 작업 원리 다이어그램
3. Ajax를 보내고받는 해당 방법
1. 요청을 보내는 해당 방법
1) OnreadyStateChange 이벤트 처리 기능 :이 기능은 사용자가 아닌 서버에서 트리거됩니다. ReadyState 속성이 변경 될 때마다 OnreadyStateChange 이벤트가 트리거됩니다.
2) Open (Method, URL, Asynchronized) : xmlhttprequest 객체의 Open ()을 사용하면 프로그램이 AJAX 통화 서버로 요청을 보낼 수 있습니다. 메소드 요청 유형은 "get"또는 "post"일 수 있고 URL은 경로 문자열입니다. sysnchronized는 요청이 비동기 적으로 전송 될지 여부를 나타냅니다.
3) 보내기 (데이터) : 데이터는 서버로 전달되는 문자열입니다. "GET"요청이 선택되면 데이터가 NULL입니다.
2. 해당 방법을받습니다
1) ReadyState : 숫자 값으로 표시되는 AJAX의 현재 상태를 나타내고, 0은 초기화를 나타내고, 1은로드를 나타내고, 2를 나타내며, 3은 응답을 보내고, 4는 응답을 보내고, 응답이 보낸 응답을 나타내며, 각 브라우저의 값을 4로 설정합니다.
2) 상태 : Javaweb에서와 마찬가지로 404는 페이지를 찾지 못했고, 403은 액세스를 금지하고, 500 내부 서버 오류, 200은 모두 정상이며, 304는 수정되지 않았으며, 서버가 보낸 상태 코드는 상태 속성에 저장됩니다. 이 값을 통해 서버가 성공적인 응답을 보냈는지 확인할 수 있습니다.
3) responceetext : 일반적으로 HTML, XML 또는 일반 텍스트 인 서버에서 전송 된 데이터가 포함되어 있습니다. ReadyState의 값이 4이고 상태가 200 인 경우 ResponseText 속성 만 사용할 수 있습니다. 표면적으로 Ajax 요청이 종료되었습니다. 서버가 XML을 반환하면 데이터가 responsexml에 저장됩니다.
4. 코드 데모 (Baidu 검색 상자 모방)
1. Javaweb 프로젝트 만들기 (프로젝트 디렉토리 구조는 다음과 같습니다).
2. SearchServlet.java
패키지 cn.jon.ajax; import java.io.ioexception; Java.util.list 가져 오기; javax.servlet.servletexception import; import javax.servlet.http.httpservlet; import javax.servlet.http.httpservletrequest; import javax.servlet.http.httpservletresponse; import net.sf.json.jsonarray; cn.jon.ajax.data.datautils import; 공개 클래스 SearchServlet는 httpservlet {private static final long serialversionuid = 1L; public void doget (httpservletrequest request, httpservletreponse response)는 servletexception, ioexception {// utf-8 request.setcharacterencoding ( "UTF-8")에 대한 요청의 출력 형식을 설정합니다. 응답 .SetchAracterEncoding ( "UTF-8"); 문자열 키워드 = request.getParameter ( "키워드"); if (keyword! = null) {datautils dataResource = new DataUtils (); list <string> list = dataresource.finddatalist (키워드); //system.out.println (jsonarray.fromobject (list) .tostring ()); response.getWriter (). 쓰기 (jsonArray.fromObject (list) .toString ()); }} public void dopost (httpservletrequest 요청, httpservletreponse 응답) servletexception, ioexception {doget (요청, 응답); }} 3. DataUtils.java, 리소스 파일에서 데이터를 읽으십시오
패키지 cn.jon.ajax.data; import java.io.bufferedReader; import java.io.ioexception; import java.io.inputstream; import java.io.inputStreamReader; java.util.arraylist 가져 오기; Java.util.list 가져 오기; 공개 클래스 DataUtils {private static list <string> datalist = new Arraylist <string> (); public static final string url = "/test.txt"; 정적 {readResource (url); // datalist.add ( "aa"); // datalist.add ( "ajax"); // datalist.add ( "afinal"); // datalist.add ( "bb"); } // public static void readResource (String URL) {inputStream은 = null; inputStreamReader isr = null; BufferedReader br = null; 문자열 라인 = null; try {is = dataUtils.class.getClassLoader (). getResourCeasStream (url); isr = new inputStreamReader (IS); br = 새로운 버퍼드 리더 (ISR); line = br.readline (); while (null! = line) {if (! line.isempty ()) {datalist.add (line); } line = br.readline (); } // while} catch (ioexception e) {e.printstacktrace (); } 마침내 {if (null! = br) {try {br.close (); } catch (ioexception e) {}} if (null! = isr) {try {isr.close (); } catch (ioexception e) {}} if (null! = is) {try {is.close (); } catch (ioexception e) {}}}} public list <string> finddatalist (String str) {list <string> data = new arraylist <string> (); for (string sdata : datalist) {if (sdata.contains (str)) {data.add (sdata); }} // 반환 데이터의 경우; }} 4. index.jsp, 페이지 디스플레이
<%@ page language = "java"import = "java.util.*"pageencoding = "utf-8"%> <html> <head> <link rel = "stylesheet"href = "css/my.css"> <script type = "text/javascript"src = "js/my.js"> id = "mydiv"> <img src = "img/baidu.png"> <!-입력 상자-> <입력 유형 = "text"size = "50"id = "keyword"onkeyup = "getMoreContents ()"keywordBlur () "getMoreContents ()" "input id =" "" "" "" "" ""버튼 " value = "baidu"/> <!-다음은 컨텐츠 디스플레이 영역입니다-> <div id = "popdiv"> <table id = "content-table"bgcolor = "#fffafa"cellPacing = "0"셀 패딩 = "0"> <tbody id = "content_table_body"> <!-동적으로 표시되는 데이터는 여기에 표시됩니다. </body> </html>
5. Ajax의 핵심 부분 인 My.js
var xmlhttp; // 1. 기능 함수 사용자 입력 컨텐츠의 관련 정보를 얻기위한 함수 getMoreContents () {// 먼저 사용자 입력 var 컨텐츠 = document.getElementById ( "keyword"); if (content.value == "") {// 입력 상자가 비어 있으면 이전 데이터를 지우십시오 clareContent (); 반품; } //alert(content.value); // 2. 그런 다음 Ajax를 사용하여 데이터를 비동기로 보내기 때문에 사용자 입력 컨텐츠를 서버로 보내려고하므로 xmlhttp 객체를 사용해야합니다 // xmlhttp = xmlhttp 객체; xmlhttp = createxmlhttp (); // alert (xmlhttp); // 3. 서버로 데이터를 보내려면 먼저 서버의 주소를 정의하십시오. var url = "검색? keyword ="+Escape (content.value); // true는 서버의 응답을 기다리지 않고 send () 메소드 후에 JavaScript 스크립트가 계속 실행된다는 것을 의미합니다. xmlhttp.open ( "get", url, true); // xmlhttp는 콜백 메소드를 바인딩합니다. 이 콜백 메소드는 XMLHTTP 상태가 // XMLHTTP 상태를 변경하면 호출됩니다. xmlhttp.onreadyStateChange = 콜백; // 매개 변수는 이미 URL에 있으므로 매개 변수 xmlhttp.send (null)를 추가 할 필요가 없습니다. } // xmlhttp 객체 함수 get get createxmlhttp () {// var xmlhttp 대부분의 브라우저에 적합합니다. if (wind } // (wind // 브라우저에 ActiveXObject 객체가 있지만 microsoft.xmlhttp 매개 변수가없는 경우 (! xmlhttp) {xmlhttp = new ActiveXobject ( "msxml2.xmlhttp"); }} return xmlhttp; } // 콜백 함수 함수 콜백 () {// 4는 (xmlhttp.readystate == 4) {// 200을 의미한다는 의미, 404는 찾을 수 없음을 의미하며, 500은 (xmlhttp.status == 200)이면 서버의 내부 오류를 의미한다는 것을 의미합니다. var result = xmlhttp.responsetext; // 획득 된 데이터의 분석 var json = val ( "("+result+")"); // 이러한 데이터를 얻은 후에는 데이터를 동적으로 표시 할 수 있습니다. 입력 상자 아래 에이 데이터를 표시하십시오. // Alert (JSON); SetContent (JSON); }}} // 관련 데이터 표시를 설정합니다. 매개 변수는 연관된 데이터 함수 setContent (내용)을 나타냅니다. {// 이전 데이터를 지우십시오. // 위치 설정 setLocaltion (); // 먼저 관련 데이터의 길이를 가져와 <tr> </tr> var size = contents.length; // (var i = 0; i <size; i ++) {var nextnode = contents [i]; // json data var tr = document.createelement ( "tr")를 나타냅니다. var td = document.createElement ( "TD"); td.setattribute ( "보드", "0"); td.setattribute ( "gbcolor", "#fffafa"); // TD에 대한 두 가지 스타일을 바인딩합니다 (마우스가 들어가서 이동할 때 이벤트) td.onmouseover = function () {this.className = 'MouseOver'; }; td.onmouseout = function () {this.className = '마우스 아웃'; }; td.onclick = function () {//이 메소드는 관련 데이터를 마우스로 클릭하면 관련 데이터가 입력 상자에 자동으로 채워진다는 것을 구현합니다. }; td.onmousedown = function () {// 마우스가 관련 데이터를 클릭하면 데이터가 입력 상자 문서에 자동으로 추가됩니다. }; // 연관된 데이터에 마우스가 중단되면 입력 상자에 자동으로 추가됩니다./* td.onmouseOver = function () {this.className = 'MouseOver'; if (td.innerText! = null) document.getElementById ( "키워드"). value = this.innerText; } */// 텍스트 생성 텍스트 var text = document.creatextNode (NextNode); Td. AppendChild (텍스트); Tr.AppendChild (TD); document.getElementById ( "content_table_body"). AppendChild (tr); }} // 이전 데이터 함수를 지우십시오 clearContent () {var contenttablebody = document.getElementByid ( "content_table_body"); var size = contenttable.childnodes.length; // 삭제할 때 (var i = size-1; i> = 0; i-) {// i-th child node contenttabletable.removechild (contenttable.childnodes [i])를 지정하십시오. } // 관련 데이터의 외부 테두리를 지우십시오 var var popdiv = document.getElementById ( "popdiv"). style.border = "none"; } // 입력 상자에 초점이 손실되면 이전 데이터 함수 keywordBlur () {clearContent (); } // 연관된 정보 함수 표시 위치 설정 setLocament () {// 연관된 정보의 표시 위치는 입력 상자 var 컨텐츠 = document.getElementById ( "키워드")와 일치해야합니다. var width = content.offsetWidth; // 입력 상자의 길이 var var left = content [ "offsetLeft"]; // 왼쪽 테두리까지의 거리 var var top = content [ "offsetTop"]+content.offsetheight; // 입력 상자 자체까지의 거리 (+var popdiv = div at the var popdiv =); popdiv.style.border = "그레이 1px 고체"; popdiv.style.left = left+"px"; popdiv.style.top = top+"px"; popdiv.style.width = width+"px"; popdiv.style.top = top+"px"; popdiv.style.width = width+"px"; document.getElementById ( "content-table"). style.width = width+"px"; } 6. my.css, 컨트롤 스타일
#mydiv {위치 : 절대; 왼쪽 : 50%; 상단 : 50%; 마진 왼쪽 : -200px; 마진 -탑 : -120px; } #button {배경색 : #5566ee; } .MouseOver {배경 : #708090; 색상 : #fffafa; } .mouseout {배경 : #fffafa; 색상 : #000000; }참고 :이 코드는 MOOC.com의 연구에서 비롯되며 직접 개선되었습니다. 관심있는 사람들이 의사 소통하고 함께 배울 수 있기를 바랍니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.