使用javascript原生XMLHttpRequest对象进行ajax交互

来源：互联网发布：卡梅伦与猪知乎编辑：程序博客网时间：2024/05/22 00:46

AJAX(Asynchronous Javascript And XML)：异步javascript和xml，是一种创建交互式网页应用的网页开发技术。

AJAX通过在后台与服务器进行数据交换，从而使网页实现异步更新，提高了系统性能和用户友好度。

//post请求

<script type="text/javascript">window.onload=function(){var username=document.getElementById("name");username.onblur=function(){var name=this.value;if(name == ''){document.getElementById('tip').innerHTML="<b class='notice'>请输入用户名</b>"; return;}/*if(window.XMLHttpRequest){//code for IE7+,Firefox,Chrome,Opera,Safarixhr=new XMLHttpRequest();} else {//code for IE6,IE5xhr = new ActiveXObject("Microsoft.XMLHTTP");}*///此处默认为内建XMLHttpRequest对象浏览器var xhr=new XMLHttpRequest();//打开网页（请求方法，请求网页，是否异步交互['是'=>true,'否'=>false]）xhr.open('post','demo_post.php',true); //设置请求头信息xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//发送数据xhr.send("name="+name);xhr.onreadystatechange=function(){//XMLHttpRequest对象的三个重要属性：readyState、onreadystatechange、Status,每当readyState改变时，就会触发onreadystatechange事件//readyState属性存有XMLHttpRequest的状态信息，从0到4发生变化://0：请求未初始化//1：服务器连接已建立//2：请求已接收//3：请求处理中//4：请求已完成，且响应已就绪if(this.readyState == 4 && this.status == 200) {//alert(this.responseText);if(this.responseText != 1){alert("该用户名已经注册！");} else {alert("可以注册！");}}}}}</script>

//get请求：

<script type="text/javascript">        window.onload=function(){            var username = document.getElementById("name");            username.onblur = function(){                var name = this.value;                if(name == ""){                    document.getElementById("tip").innerHTML = "<b class='notice'>请输入用户名</b>";                    return;                }                var xhr = new XMLHttpRequest();                //var uri = "demo_get.php?name="+name;                xhr.open("get","demo_get.php?name="+name,true);  //true代表异步交互                //xhr.open("get","demo_get.php?t="+Math.random,)                //get无需设置头信息 ,                xhr.send(null);                //回调函数                xhr.onreadystatechange=function(){                    if(this.readyState == 4 && this.status == 200){                        //alert(this.responseText);                        if(this.responseText != 1){                            alert("该用户名已经注册！");                        } else {                            alert("可以注册！");                        }                    }                }            }        }    </script>

//后台请求页：

<?php$name = $_POST['name'];//or  $name = $_GET['name'];$dsn = "mysql:host=localhost;dbname=demo";$db = new PDO($dsn,'root','');$res = $db->query("select * from tbl_user where username='".$name."'");if($res->fetch()) {echo 0; //不可以注册} else {echo 1; //可以注册}

0 0