Home > Developer > Web Develop
have been listening to the backstage staff said the powerful Ajax of the beautiful, now preliminary involved, just know the world's big, strange, I will always be one of the rookie, now a very ugly appearance of the interface to simply introduce the simple AJAX production of the message book.
Ajax, before in my impression has been a magical only can not be obscene to play things, know today, only to know that there is only one function, is to carry out the data, is from the background of the files written by the data, as for the writing of the document, is the backstage staff thing. The need for Ajax to pass on as much data as needed, and what values to return, is sufficient to understand them.
The following is the Ajax to use a few files, first of all, of course, HTML and CSS files
The code for the HTML file
<!doctype html>
<meta charset= "Utf-8" >
<title> Untitled Document </title>
<link rel= "stylesheet" style= "Text/css" href= "Css.css"/>
<script src= "Ajax.js" ></script>
<script src= "Guestbook1.js" ></script>
<body>
<div id= "Header" ></div>
<div id= "Container" >
<div id= "list";
<!--<dl>
<dt>
<strong>zmouse</strong> said:
</dt
<dd> content </dd>
<dd class= "T",
<a href= "javascript:;" id= "Support" > Top (<span >0</span>) </a>
|
<a href= "javascript:;" id= "Oppose" > Stepping (<span>0</span>) </a>
</dd>
</dl >-->
</div>
<div id= "ShowMore" > show more ... </div>
<div id= "sidebar";
<div id= "user" style= "margin-bottom:10px;"
</div>
<!--registration-->
<div id= "Reg";
<div>
<p > Username: <input type= "text" name= "username" id= "username1" ></P>
<p id= "Verifyusernamemsg" >< /p>
<p> Password: <input type= "password" name= "password" id= "Password1" ></P>
<p>< Input type= "button" value= "register" id= "Btnreg"/></P>
</div>
</div>
<!--Landing-
<div id= "Login" >
<div>
<p> Username: <input type= "text" name= "username2" id= "UserName2" ></p>
<p> Password: <input type= "password" name= "Password2" id= "Password2" ></p>
<p><input type= "button" value= "Login" id= "Btnlogin"/></p>
</div>
</div>
<!--message Posted--
<div id= "Sendbox" >
<div>
<textarea id= "Content" ></textarea>
<input type= "button" value= "Submit" class= "BTN1" id= "Btnpost"/>
</div>
</div>
</div>
</div>
</body>
Then is the CSS file, because this article is mainly about the use of AJAX features, so for the CSS in this aspect of the knowledge of the simple to take.
@charset "Utf-8";
Body {
margin:0; padding:0;
Background:url ("Images/bg.gif");
}
H1,h2,h3,h4,h5,h6 {margin:0; padding:0;}
a {text-decoration:none; color: #444;}
. Hide {
Display:none;
}
. Show {
Display:block;
}
. btn1 {
Padding:0 12px; margin-left:0px;
Display:inline-block;
height:28px; line-height:28px; font-size:14px;
border:1px solid #D9D9D9; Background-color: #FAFAFA;
}
#header {
position:relative;
height:42px; Background-color: #FFF; border-bottom:1px solid #CCC;
}
#wrapper {
margin:0 Auto; Overflow:hidden;
width:1000px; height:42px; border-right:1px solid #EEE;
}
#wrapper A.loginnav {
Padding:0 10px; Float:right;
width:100px; height:42px; border-left:1px solid #EEE;
Text-align:center; line-height:42px;
}
#wrapper A.loginnav:hover {
Color: #9A0000;
}
#container {
margin:10px Auto; position:relative;
width:1000px;
}
#sidebar {
padding:10px; Position:absolute; top:0px; right:0px;
width:300px; border:1px solid #CCC; Background-color:white;
}
#sidebar h4 {
padding:5px;
height:24px; line-height:24px; Background-color: #CCC;
}
#sendBox {
width:300px;
}
#sendBox Div {
margin:5px 0;
}
#sendBox TextArea {
margin-bottom:5px;
width:294px; height:140px;
}
#list {
width:660px;
}
#list DL {
margin:0 0 10px 0; padding:10px;
border:1px solid #CCC; Background-color:white;
}
#list DT {
height:30px; line-height:30px;
}
#list dd.t {
Text-align:right;
}
#list dd.t a {margin:0 5px;}
#showMore {
width:640px;
margin:0 0 10px 0; padding:10px;
border:1px solid #CCC; Background-color:white; Text-align:center;
Cursor:pointer;
}
After the simple layout of HTML and CSS, and now began to enter the world of Ajax, is divided into several points, 1, create objects, 2 write the Open () method, which is to pass a few parameters, one is the method, get and post two methods, the second personal technical URL, is to request the server's link URL, 3 is nothing more than true or false, the representative is not asynchronous, as for the concept of asynchrony, there will be time to detailed introduction later. For convenience, it is encapsulated into a ajax.js file, which is called directly in the HTML file.
Ajax.js file contents are as follows
Function Ajax (method, URL, data, success) {
var xhr = null;
try {
XHR = new XMLHttpRequest ();
} catch (e) {
XHR = new ActiveXObject (' microsoft.xmlhttp ');
}
if (method = = ' Get ' && data) {
URL + = '? ' + data;
}
Xhr.open (method,url,true);
if (method = = ' Get ') {
Xhr.send ();
} else {
Xhr.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded ');
Xhr.send (data);
}
Xhr.onreadystatechange = function () {
if (xhr.readystate = = 4) {
if (Xhr.status = = 200) {
Success && Success (Xhr.responsetext);
} else {
Alert (' Error, ERR: ' + xhr.status);
}
}
}
}
The best is the guestbook.js file, my step is to introduce a guestbook file in the server, and then there is a PHP file, which provides the interface of each function module, and then this guestbook.js file wrote some methods to achieve the specific function
Guestbook.js File Code
Window.onload=function () {
var Ousername=document.getelementbyid ("username1");
var Overifyusernamemsg=document.getelementbyid ("Verifyusernamemsg");
var Ouser=document.getelementbyid ("User");
var Ouserinfo=document.getelementbyid ("UserInfo");
var Oreg=document.getelementbyid ("Reg");
var Ologin=document.getelementbyid ("Login");
var Olist=document.getelementbyid ("list")
var Oshowlist=document.getelementbyid ("ShowMore");
var ipage=1;
Ousername.onblur=function () {
Ajax (' Get ', ' guestbook/index.php ', ' m=index&a=verifyusername&&username= ' +this.value,function (data) {
var d=json.parse (data);
Overifyusernamemsg.innerhtml=d.message;
if (D.code) {
Overifyusernamemsg.style.color= ' Red ';
}
else{
Overifyusernamemsg.style.color= ' green ';
}
})
}
var oPassword1 = document.getElementById (' Password1 ');
var oregbtn = document.getElementById (' Btnreg ');
Oregbtn.onclick=function () {
Ajax (' Post ', ' guestbook/index.php ', ' m=index&a=reg&username= ' +encodeuri (ousername.value) + ' &password= ' +opassword1.value,function (data) {
var d=json.parse (data);
alert (d.message);
})
}
var Ousername2=document.getelementbyid ("UserName2");
var oPassword2 = document.getElementById (' Password2 ');
var obtnlogin = document.getElementById (' Btnlogin ');
Obtnlogin.onclick=function () {
Ajax (' Post ', ' guestbook/index.php ', ' m=index&a=login&username= ' +encodeuri (ousername2.value) + ' & Password= ' +opassword2.value,function (data) {
var d=json.parse (data);
alert (d.message);
if (!d.code) {
Updateusernamestates ()
}
})
}
function GetCookie (key) {
var arr1 = Document.cookie.split ('; ‘);
for (var i=0; i<arr1.length; i++) {
var arr2 = arr1[i].split (' = ');
if (Arr2[0]==key) {
return arr2[1];
}
}
}
Updateusernamestates ();
function Updateusernamestates () {
var uid=getcookie (' uid ');
var Username=getcookie (' username ');
if (UID) {
ouser.style.display= "Block";
Ouserinfo.innerhtml=username;
Oreg.style.display= "None";
Ologin.style.display= "None";
}
else{
ouser.style.display= "Block";
Ouserinfo.innerhtml= "";
oreg.style.display= "Block";
ologin.style.display= "Block";
}
}
var ologout = document.getElementById (' logout ');
Ologout.onclick = function () {
Ajax (' Get ', ' guestbook/index.php ', ' m=index&a=logout ', function (data) {
var d = json.parse (data);
alert (d.message);
if (!d.code) {
Exit success
Updateusernamestates ();
}
});
return false;
}
var Ocontent=document.getelementbyid (' content ');
var Obtnpost=document.getelementbyid (' Btnpost ');
Obtnpost.onclick=function () {
Ajax (' Post ', ' guestbook/index.php ', ' m=index&a=send&content= ' +ocontent.value,function (data) {
var d=json.parse (data);
alert (d.message);
if (!d.code) {
CreateList (d.data,true);
}
})
}
function CreateList (Data,insert) {
var odl=document.createelement (' DL ');
var odt=document.createelement (' dt ');
var ostrong=document.createelement (' strong ');
Ostrong.innerhtml=data.username;
Odt.appendchild (Ostrong);
var odd1=document.createelement (' DD ');
Odd1.innerhtml=data.content;
var odd2=document.createelement (' DD ');
Odd2.classname= ' t ';
var oa1=document.createelement (' a ');
var oa2=document.createelement (' a ');
oa1.innerhtml = ' Top (<span> ' +data.support+ ' </span>) ';
oa2.innerhtml = ' Tread (<span> ' +data.oppose+ ' </span>) ';
Odd2.appendchild (OA1);
Odd2.appendchild (OA2);
Odl.appendchild (ODT);
Odl.appendchild (ODD1);
Odl.appendchild (ODD2);
if (Insert&&olist.children[0]) {
Olist.insertbefore (Odl,olist.children[0])}
else{
Olist.appendchild (ODL)
}
}
Oshowlist.onclick=function () {
Showlist ();
ipage++;
}
function Showlist () {
Ajax (' Get ', ' guestbook/index.php ', ' m=index&a=getlist&n=2&page= ' + ipage, function (data) {
var d = json.parse (data);
var data = D.data;
if (data) {
for (var i=0; i<data.list.length; i++) {
CreateList (Data.list[i]);
}
}
else {
OshowList.style.display = "None";
}
});
}
}
The PHP file is written by the backend, so there is no longer a detailed explanation for the specific features and code.
Two: Explanation of several functional modules
Mainly user registration, login, exit, leave a message, load more of these five modules, the main approach is basically the same, is to pass what parameters need to be passed in Ajax (), and pay attention to the returned data.
This is just the beginning of the right side. About Registration Login Interface
The above is the login to their own account after the appearance of the interface, the reason for their name will appear in this case, because the name of the login is Chinese characters, because it is too late to reload, so the above situation, then there will be time to improve. The above display is about the message of the interface, the first will only show two days message, because his default message is n=10, here in order to facilitate the display to see the effect, so will guestbook.js in the n=2, constantly click load more, will load two messages each time, Know that the message in the database is not, show more of this column will also disappear. Finally, this is the overall interface. Well, about the application of Ajax is described here, specific later on the production of examples will be introduced later.Open the world of Ajax with the development of message book
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
