Ajax 데이터 추가 즉시 디 스 플레이 정보 편

오늘 우리 가 배 울 내용 은 ajax 를 사용 하여 서버 의 데이터베이스 에 데 이 터 를 추가 한 다음 웹 페이지 를 새로 고치 지 않 은 상태 에서 추 가 된 데 이 터 를 즉시 표시 하 는 것 입 니 다.설명 할 것 은 이번 ajax 인 스 턴 스 튜 토리 얼 은 앞의 3 편 과 2 가지 큰 차이 점 이 있 습 니 다.1:우 리 는 데이터 베 이 스 를 조작 해 야 합 니 다.2:요청 한 서버 웹 페이지 를 바 꾸 려 고 합 니 다.웹 을 사용 하지 않 습 니 다.ajax.Asp 파일 입 니 다.새로운 요청 페이지 는:add 입 니 다.Data.asp.접 두 사 를 보면 알 수 있 을 겁 니 다.제 가 서버 에서 사용 하 는 기술 은 Asp 입 니 다.모두 Asp 가 시대 에 뒤떨어 졌 다 고 말 하지만 그의 간단 하고 사용 하기 쉬 우 며 배우 기 쉬 워 서 저 를 깊이 끌 어 당 겼 습 니 다!물론 php,.net,또는 jsp 를 사용 하여 이 Asp 파일 의 원본 코드 를 쉽게 모 의 할 수 있 습 니 다.이번 튜 토리 얼 에서 마지막 으로 이 Asp 의 원본 코드 를 제공 하 겠 습 니 다!다음은 전단 의 코드 를 살 펴 보 겠 습 니 다.이번 ajax 인 스 턴 스 효과 데모
 
<html>
<head>
<title>ajax </title>
</head>
<body>
:<input id="str" type="input" /> <input type="button" value=" " onclick="add_Post()"/>
<span id="msg" style="color:red"></span>
<script type="text/javascript">
function ajax_xmlhttp(){
// IE xmlhttpRequest, IE5.0
var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP");
for(var i=0; i<msXmlhttp.length; i++){
try
{
_xmlhttp=new ActiveXObject(msXmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
} // IE xmlhttp.
// IE , FireFox xmlhttpRequest
if(!_xmlhttp && typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}

//
function Post(){
var ajax = ajax_xmlhttp(); // xmlhttprequest .
ajax.open("post","add_data.asp?action=read",true);// , ,
ajax.onreadystatechange = function(){//
if(ajax.readyState==4){//
if(ajax.status==200){//http ok
var xmlData = ajax.responseXML;
var list = xmlData.getElementsByTagName("list");// list
if(list.length!=0){
var t = document.createElement("table");
t.setAttribute("border","1");
t.setAttribute("id","abc"); // id , abc
var thead = t.createTHead();
var _tr = thead.insertRow(0) // thead
var _td = _tr.insertCell(0);
_td.innerHTML = " ";
document.body.appendChild(t);
for(var i=0;i<list[0].childNodes.length;i++){ // list, list .
var tr = t.insertRow(0);
var td = tr.insertCell(0);
td.innerHTML = list[0].childNodes[i].firstChild.nodeValue;
}
}
}
}
}
ajax.send(null);
}

//
function add_Post(){
var msgaes = document.getElementById("msg");//
var str = document.getElementById("str");//
if(str.value.length == 0){
msgaes.innerHTML = " !"
return;
}
msgaes.innerHTML = " ";
var ajax = ajax_xmlhttp();// xmlhttprequest
ajax.open("post","add_data.asp?action=add",true);// , ,

var param = "str="+escape(str.value);// , str, str
ajax.onreadystatechange = function(){
if(ajax.readyState==4){
if(ajax.status==200){
var msg = ajax.responseXML.getElementsByTagName("msg");// msg
if(msg[0].firstChild.nodeValue == 0){
var t = document.getElementById("abc");
var tr = t.insertRow(0);
var td = tr.insertCell();
td.innerHTML = str.value;
str.value = "";
msgaes.innerHTML = " ";
}
else if(msg[0].firstChild.nodeValue == 3){
msgaes.innerHTML = " ";
return;
}
else if(msg[0].firstChild.nodeValue == 1){
msgaes.innerHTML = " , !";
return;
}
else{
msgaes.innerHTML = " . . !";
}
}
}
}
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");// , .
ajax.send(param);// send param .
}
window.load = Post();//
</script>
</body>
</html>



와 위의 인 스 턴 스 효 과 를 클릭 하 는 것 이 바로 우리 가 오늘 배 워 야 할 목적 입 니 다.위의 코드 는 전단 의 html 코드 일 뿐 입 니 다.코드 에는 3 개의 사용자 정의 함수 가 있 습 니 다.1,ajaxxmlhttp();이 함 수 는 앞에서 말 했 습 니 다.사용 가능 한 XML HTTP Request 대상 을 만 드 는 데 사 용 됩 니 다.아직 모 르 시 면 참고 하 십시오.ajax 는 편 2,Post()를 준비 하기 시작 합 니 다.이 함 수 는 데 이 터 를 읽 는 데 사 용 됩 니 다.저 희 는 이 튜 토리 얼 에서 ajax 가 데 이 터 를 어떻게 읽 는 지 설명 하지 않 습 니 다.참고 할 수 있 습 니 다.ajax 는 데이터 편 을 읽 으 려 고 시도 할 때 ajax 와 데 이 터 를 표 로 읽 었 지만 앞의 2 편 과 는 다 릅 니 다.이 Post 함 수 는 눌 렀 을 때 촉발 되 는 것 이 아니 라 웹 페이지 를 처음 열거 나 페이지 를 새로 고 칠 때 만 이 함 수 를 실행 합 니 다.그 목적 은데이터베이스 에 존재 하 는 데 이 터 를 읽 는 데 사 용 됩 니 다.데이터 추가 에 성공 한 후 이 함 수 를 실행 하지 않 았 습 니 다.그 비밀 아래 설명 에서 알려 드 리 겠 습 니 다!그리고 open 방법 에 있 는 설정 을 다시 한 번 보 세 요.요청 한 사이트 뒤에 action=read 가 하나 더 생 겼 습 니 다.이것 은 모두 가 사용 해 야 합 니 다.url 뒤의 매개 변 수 는...서버 에서 이 인 자 를 받 을 수 있 습 니 다.Asp 에서 Request.QueryString 을 사용 하여 받 습 니 다.Php 에서$get 방법 으로 받 습 니 다.서버 에 알려 주 려 면 이 url 의 인 자 를 설정 합 니 다.어떤 동작 을 수행 해 야 하 는 지.addData.asp 웹 페이지 에는 두 개의 사용자 정의 과정 이 있 습 니 다.하 나 는 데 이 터 를 읽 는 데 사용 되 고 하 나 는 데 이 터 를 추가 하 는 데 사 용 됩 니 다.이 action=read 매개 변수 서버 가 받 은 후에 판단 을 거 쳐 데 이 터 를 읽 는 과정 을 수행 합 니 다!3.우리 이 add 에 중점 을 두 고 이야기 합 시다.Post 함수.함 수 는 처음부터 getElement ById 방법 을 사용 하여 웹 페이지 에서 msg 와 str.msg 를 찾 는 것 은 현재 작업 정 보 를 표시 하 는 데 사 용 됩 니 다.str 는 입력 한 내용 을 가 져 오 는 데 사 용 됩 니 다.그리고 str 의 텍스트 상자 에 내용 을 입력 했 는 지 여 부 를 판단 합 니 다.비어 있 으 면 함 수 를 종료 합 니 다.open 방법의 설정 을 보십시오.요청 한 웹 페이지 url 뒤의 매개 변 수 는 action=add 입 니 다.서버 웹 페이지 에서 action 이라는 인 자 를 받 습 니 다.값 이 add 라면 데 이 터 를 삽입 하 는 과정 을 수행 합 니 다.var param="str="+escape(str.value);str 텍스트 상자 의 내용 을 str 와 같 게 한 다음 param 변수 에 값 을 부여 합 니 다.나중에 요청 을 보 낼 때 send 는 이 param 변수의 내용 을 제출 합 니 다.escape 는 모든 컴퓨터 에서 읽 을 수 있 도록 String 대상 인 코딩 을 하 는 것 입 니 다.입력 한 내용 을 디 코딩 하 는 것 입 니 다.테스트 를 통 해 무시 할 수도 있 습 니 다.그러나 때때로 오류 가 발생 할 수 있 습 니 다.안전 을 위해 우 리 는 escape 를 사용 합 니 다.우 리 는 readystatechange 가 지정 한 프로그램 을 말 하지 않 습 니 다.아래 를 보 세 요:ajax.setRequestHeader("content-type","application/x-ww-form-urlencoded").이 줄 의 뜻 은 서버 에 폼 내용 을 제출 하 겠 습 니 다.요청 방식 이 post 이 고 데이터 가 서버 에 제출 되 었 을 때 setRequestHeader 를 설정 해 야 합 니 다.요청 방식 이 get 이거 나 데이터 가 없 으 면 이 문 구 를 무시 할 수 있 습 니 다.ajax.send(param);요청 을 보 냅 니 다.send 의 매개 변수 에 param 변 수 를 제출 할 내용 을 지정 합 니 다.alert 를 사용 하면 str="입력 한 내용"이 팝 업 됩 니 다.그리고 서버 홈 페이지 에서 이 str 를 받 습 니 다.str 의 내용 을 가 져 올 수 있 습 니 다.바로 텍스트 상자 에 입력 한 것 입 니 다.이 요청 을 받 은 서버 홈 페이지 를 볼 때 가 된 것 같 습 니 다.서버 에서 무엇 을 했 는 지 보 세 요.
 
<!--#include file="Conn.Asp"-->
<%
' :http://Www.Web666.Net
' :
'
' , xml
xml="<?xml version='1.0' encoding='gb2312'?><body>"
action=Request.QueryString("action") ' get action
Select case action
case "read" ' read
Call Read
case "add" ' add
Call Add_Data
case else
xml = xml&"<msg> , !</msg>"
End Select

xml=xml&"</body>"
Response.Clear
Response.ContentType="text/xml"
Response.CharSet="gb2312"
Response.write xml ' . . xml . xml
Response.End

Sub Read '
Call OpenConn '
Sql = "Select * From web_table" ' web_table
Set Rs = Conn.Execute(Sql) ' Sql , sql rs
xml = xml&"<list>" ' list .
While Not Rs.Eof ' .
xml = xml&"<li>"&Rs("web")&"</li>"
Rs.MoveNext '
Wend ' .
xml = xml&"</list>" ' list
Close_Conn '
End Sub

Sub Add_Data '
On Error Resume Next '
OpenConn '
str = Trim(Request.Form("str")) ' str
If str = "" Then
xml = xml&"<msg>3</msg>" ' . 3
Exit Sub '
End If
Sql = "Insert Into web_table (web) values ('"&str&"')"
Conn.Execute(Sql) '
If Err.Number = 0 Then ' ,
xml = xml&"<msg>0</msg>" ' , . 0
Exit Sub
Else
xml = xml&"<msg>1</msg>" ' . .
Exit Sub
End If
End Sub
%>
위 에 ajax 가 요청 한 서버 홈 페이지 가 있 습 니 다.addData.Asp 의 소스 코드 입 니 다.지금 Asp 를 사용 하 는 것 은 많 지 않 겠 죠?그러나 나 는 여전히 그녀 에 게 푹 빠 져 있다.네가 사용 하 는 서버 기술 이 Php 든,Net 이 든,또는 JSp 등.내 설명 을 통 해 당신 은 쉽게 이 소스 코드 의 기능 을 모 의 할 수 있 을 것 입 니 다.1:include file="Conn.asp"는 Asp 에서 웹 페이지 를 도입 하 는 역할 을 합 니 다.Conn.asp 는 나의 데이터베이스 링크 파일 입 니 다.안전 을 위해 데이터베이스 이름 을 노출 하지 않 겠 습 니 다.당신 이 직접 라 이브 러 리 를 만 들 고 이름 을 지어 테스트 하 세 요.2:이름 을 xml 변수 로 정의 합 니 다.xml 형식의 데 이 터 를 이 변수 에 저장 합 니 다.Response.Write 를 사용 하여 xml 변수의 내용 을 출력 합 니 다.3:전단 url 에서 전 달 된 action 인 자 를 받 고 action 의 값 을 판단 합 니 다.select case 는 설명 할 필요 가 없습니다.여러 가지 판단 을 사용 합 니 다.action 의 값 이 read 이면 read 를 실행 합 니 다.add 라면 add 를 실행 합 니 다.Data 프로 세 스.둘 다 그렇지 않 으 면 정상 적 인 경 로 를 통 해 요청 한 것 이 아니 라 는 것 을 증명 합 니 다.xml 변수 에 msg 탭 을 추가 합 니 다.출력 후 표시 할 내용 4:Response.clear 캐 시 제거 5:Response.ContentType="text/xml"출력 텍스트 형식 을 정의 합 니 다.xml 형식 6:Response.Charset="gb 2312"출력 인 코딩,중국어 인 코딩.7:Response.write xml 은 클 라 이언 트 에 xml 변수 에 있 는 데 이 터 를 출력 합 니 다.이 변 수 는 xml 형식의 데 이 터 를 저장 합 니 다.8:Response.End 는 모든 출력 을 중단 합 니 다.9:read 과정 을 정의 합 니 다.데이터베이스 test 를 읽 기 위해 서 입 니 다.table 표 의 웹 필드 에 있 는 데이터 입 니 다.데이터베이스,sql 문 구 를 엽 니 다.sql 을 실행 합 니 다.읽 기 시작 합 니 다!이 지식 들 을 나 는 말 하지 않 겠 다.만약 네가 아직 할 줄 모른다 면,나 는 네가 데이터 베 이 스 를 조작 하 는 지식 을 좀 배 워 야 한다 고 생각한다!이 읽 기 과정의 의 미 를 중점적으로 말씀 드 리 겠 습 니 다.데 이 터 를 읽 기 전에 xml 변수 에 list 탭 을 추가 한 다음 에 모든 데 이 터 를 list 탭 에 읽 습 니 다.모든 데 이 터 는 li 탭 에 포함 되 어 있 습 니 다.읽 기 가 끝 났 습 니 다.list 탭 을 닫 습 니 다.제 가 말 하고 싶 은 것 은...이 Read 과정 은 클 라 이언 트 에 게 어떠한 내용 도 출력 하지 않 았 습 니 다.그의 작업 은 데이터베이스 에 있 는 내용 을 xml 형식 으로 그 xml 변수 에 읽 는 것 입 니 다.클 라 이언 트 action=add 일 때 Read 과정 을 실행 합 니 다.Read 과정 은 새로운 xml 변 수 를 보 여 줍 니 다.Response.Write xml 출력 변 수 를 클 라 이언 트 에 보 냅 니 다.클 라 이언 트 는 이 xml 를 받 아들 입 니 다.우 리 는 전단 에서 responseXML 을 사용 하여 이 xml 를 받 은 후에 표시 합 니 다!알 겠 느 냐?몰라요.Data 이 과정.addData 의 의 미 는 Read 와 같 습 니 다.일련의 작업 을 수행 한 후에 xml 변수 에 값 을 부여 합 니 다.ddData 의 역할 은 클 라 이언 트 가 보 낸 데 이 터 를 받 아들 이 는 것 입 니 다.데 이 터 를 데이터베이스 에 기록 합 니 다.add 를 자세히 보 세 요.Data 의 프로그램 논리 입 니 다.우선 제출 한 데이터 가 비어 있 는 지 판단 합 니 다.xml 변수 에 msg 탭 을 추가 하면 내용 은 3 입 니 다.그리고 add 를 종료 합 니 다.Data.데이터 가 비어 있 지 않 으 면 데이터베이스 에 이 데 이 터 를 기록 합 니 다.그리고 오류 가 발생 했 는 지 판단 합 니 다.오류 가 없 으 면 xml 변수 에 msg 탭 을 추가 합 니 다.내용 은 0 입 니 다Data.그래서 msg 태그 만 기 록 됩 니 다.그럼 클 라 이언 트 add 로 바로 돌아 오 겠 습 니 다.Post 에서 함 수 는 바로 이 msg 라벨 을 받 은 후에 msg 의 내용 에 따라 서버 에 무슨 일이 일 어 났 는 지 판단 합 니 다!msg 의 내용 이 0 이면 서버 의 모든 것 이 정상 적 이 고 오류 가 발생 하지 않 았 음 을 증명 합 니 다.데이터 가 데이터베이스 에 추가 되 었 습 니 다.저 희 는 Dom 을 사용 하여 str 의 내용 을 표 에 기록 합 니 다.데 이 터 를 읽 는 Post 함 수 를 실행 하지 않 았 습 니 다.msg 내용 이 3 이면 빈 내용 을 입력 한 것 을 증명 합 니 다.msg 내용 이 1 이면 서버 에 오류 가 발생 했 음 을 증명 합 니 다.데이터 기록 실패!어떻게 당신 은 ajax 기술 을 사용 하여 데이터베이스 에 데 이 터 를 추가 하 는 것 을 배 웠 습 니까?아니 라 고 하지 마!제발 힘 들 게 얘 기해 주세요.

좋은 웹페이지 즐겨찾기