ajax学习笔记
(文中标注灰色的是现阶段不懂,以后再研究的地方) Ajax = Asynchronous Javascript and XML 异步Javascript和XML
一、XMLHttpRequest:Ajax的基础 XMLHttpRequest对象是用来和服务器交换数据的。
如果需要向服务器发送请求,我们使用XMLHttpRequest对象的open()和send()方法;
一个简单的get请求: xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true); xmlhttp.send(); 注意:为了避免浏览器使用缓存结果,请务必在url添加一个唯一的ID xmlhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates&sid="+Math.random()",true); xmlhttp.send(); 如果要用POST方式发送数据,那么我们应该先用setRequestHeader()来添加HTTP头。然后在send()方法中规定希望发送的数据: xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates");
如何创建XMLHttpRequest对象? function GetXmlHttpObject() { var xmlHttp=null; try {// Firefox,Opera 等 xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }<span style="font-family: 'Times New Roman',serif; font-size: 10.5pt; text-indent: 0cm; background-color: rgb(255,255,255);"></span> 如何获得XMLHttpRequest的响应?
例如: document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 如果来自服务器的响应是xml,而且需要对xml对象进行解析,就应该使用responseXML属性: 例如:
var xmlDoc = xmlHttp.responseXML; var txt = ""; var x = xmlDoc.getElementsByTagName("ARTIST"); for (i=0; i<x.length; ++i) { txt = txt+x[i].childNode[0].nodeValue + "<br/>"; } document.getElementById("myDiv").innerHTML = txt; 二、onreadystatechange事件: 当请求被发送到服务器时,readyState就会改变。每当readyState改变时,就会触发onreadystatechange事件。
三、综合示例: <!-- login.html --!> <html> <head> <title>登录星愿天空</title> <meta charset="UTF-8"> <link rel="shortcut icon" href="resources/favicon.ico"> <link rel="stylesheet" href="stylesheet/style_login.css" media="screen" type="text/css"> <script type="text/javascript" src="script/login.js"></script> <script type="text/javascript" src="script/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="script/modernizr.js"></script> <script type="text/javascript"> function submit_click() { var email = document.getElementById("email").value; var password = document.getElementById("password").value; feedback(email,password); } function register_click() { window.location.href="http://m82a1.sinaapp.com/register.html"; } </script> </head> <body> <form action="servlet/doLogin.php" method="GET"> <input name="email" placeholder="您的注册邮箱?" class="email" type="email" id="email" required /> <input name="password" placeholder="您的密码?" class="pass" type="password" id="password" required /> <div id="message"></div> <input name="smt" class="btn" type="button" onclick="submit_click()" value="我要许愿^O^" /> <input name="" class="btn" type="button" onclick="register_click()" value=">_<我要注册"/> </form> </body> </html>
/* * login.js */ var xmlHttp; function feedback(email,password) { xmlHttp = GetXmlHttpObject(); if(xmlHttp==null) { alert("您的浏览器不支持ajax"); return; } var url = "../servlet/doLogin.php"; url = url+"?email="+email+"&password="+password+"&rid="+Math.random(); //绑定readystatechange监听者 xmlHttp.onreadystatechange = onReadyStateChanged; xmlHttp.open("GET",true); xmlHttp.send(null); } function onReadyStateChanged() { if (xmlHttp.readyState==4) { if (xmlHttp.status==200) { if(xmlHttp.responseText == "true") { window.location.href = "../main.php"; } else { document.getElementById("message").innerHTML = "用户名或密码错误"; } } } else if (xmlHttp.readyState==2) { document.getElementById("message").innerHTML = "正在连接服务器..." } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox,Opera 等 xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } <?php /** doLogin.php * Created by PhpStorm. * User: APTX_4869 * Date: 2014/11/20 * Time: 11:19 */ session_start(); $mysql = new SaeMysql(); $mysql->setCharset("UTF8"); $data = $mysql->getData("select * from ". "`USER_TABLE` where". "`email`='".$_GET["email"]."' and ". "`password`='".$_GET["password"]."'"); if (count($data)>0) { $_SESSION["uid"] = $data[0]["uid"]; echo "true"; //盖戳 /* * 特别注意!!!! * 在使用ajax的情况下,如果登录成功,不应当在服务端转发请求 * 而应当采用“盖戳”的形式,即把用户id记录在会话。同时标注TRUE * * 如果不这么做,你转发的页面就会嵌入登录框的div里面 * 要多难看有多难看 */ } else { echo "false"; } $mysql->closeDB(); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |