Ajax总结
Ajax的总结
Ajax是什么?
Ajax要素
Ajax的异步刷新
<div id="info"></div> <form action="./inner.php" method="post" target="abc"> 用户名:<input type="text" name="username"> 密 码:<input type="password" name="password"> <input type="submit" value="提交"> </form> <iframe width="0" height="0" frameborder="0" name="abc"></iframe> <?php $uname = $_POST['username']; $pw = $_POST['password']; // js中的parent表示父级页面 if($uname == 'admin' && $pw == '123'){ echo '<script> parent.document.getElementById("info").innerHTML = "登录成功";</script>'; }else{ echo '<script> parent.document.getElementById("info").innerHTML = "用户名或者密码错误";</script>'; } ?> ajax的基本操作步骤
// 1、创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 2、配置发送参数 xhr.open('get','./data.php'); // 3、执行发送动作 xhr.send(null); // 4、处理响应 xhr.onreadystatechange = function(){ if(xhr.status == 200){ if(xhr.readyState == 4){ // 在这里才可以获取服务器返回的数据 var result = xhr.responseText; if(result === '1'){ var info = document.getElementById('info'); info.innerHTML = '服务器数据已经返回'; } } } }
function myajax(type,url,param,callback){ // 1、创建xhr对象 var xhr = null; if(window.XMLHttpRequest){ // 标准写法 xhr = new XMLHttpRequest(); }else{ // IE的写法 xhr = new ActiveXObject('Microsoft.XMLHTTP'); } // 2、准备发送参数 if(type == 'get'){ // 处理get请求参数,并且进行编码 url += '?' + encodeURI(param); } xhr.open(type,url); // 3、执行发送动作 var data = null; if(type == 'post'){ // 如果是post提交,那么就把参数传递给send data = param; // post提交必须设置请求头 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); } xhr.send(data); // 4、处理响应(指定回调函数) // 下面的回调函数什么时候执行?不确定的 xhr.onreadystatechange = function(){ // 判断响应的状态 if(xhr.status == 200 && xhr.readyState == 4){ // 获取响应数据 var result = xhr.responseText; // 调用回调函数 callback(result); } } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |