原生JavaScript实现AJAX

最新推荐文章于 2022-07-21 09:20:57 发布

lishengzxc

最新推荐文章于 2022-07-21 09:20:57 发布

阅读量549

点赞数

分类专栏： javascript 文章标签： xmlhttprequest javascript ajax php

本文链接：https://blog.csdn.net/lishengzxc/article/details/39801337

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

ajax是什么？
AJAX即 “Asynchronous Javascript And XML”，（异步Javascript 和 XML），指一种创建交互式网页应用的网页开发技术。
粗略的来说，AJAX技术，实现的是局部刷新页面，从而提高用户的操作体验。

普通的网页交互，通常是这样浏览器与服务器直接交互的，用户将数据提交给服务器后，服务器处理后，返回给浏览器，这样造成的结果的是，用户将数据提交给服务器，需要等待服务器返回结果后，才能进行下一步操作。如果使用AJAX以后，用户可以部分将部分数据先提交给服务器，服务器处理后，直接返回给浏览器（不用刷新）。

目前AJAX主要使用在：
1、动态加载数据，例如：树形菜单，联动菜单（省市联动）……
2、表单认证（用户在不提交表单前，就验证）……
3、电子商务应用（购物车）……
4、数据，页面的局部刷新

AJAX工作原理：
我们可以将AJAX的工作原理分为4条线
如下图：

第一条线：浏览器将请求发送给AJAX引擎
第二条线：AJAX引擎将浏览球的请求发送给服务器，让服务器处理
第三条线：服务器将处理的结果按一定个格式（文本，XML，JSON）返回给AJAX引擎

第四条线：浏览器接收到AJAX从服务器的数据，再按一定的规则，输出到浏览器上

代码实现
客户端GET方法提交数据，服务器返回文件格式数据的demo

//register.php
<html>
<head>
<title>ajax用户注册</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
    font-family: "Microsoft JhengHei";
}
label{
    font-weight: bolder;
    font-size: 14px;
}
input.check{
    border-width: 0;
    color: red;
    font-family: "Microsoft JhengHei";
    font-weight: bolder;
}
</style>
 
<script type="text/javascript">
/*
** 创建ajax引擎
** 为不同浏览器做兼容
*/
function getXmlHttpObject(){
        //第一根线
    var xmHttpRequset;
 
    if(window.ActiveXObject){
        //window.alert("ie")
        xmlHttpRequset = new ActiveXObject("Microsoft.XMLHTTP");
    }else{   
        //window.alert("ff")
        xmlHttpRequset = new XMLHttpRequest();
    }
   
    return xmlHttpRequset;
}
 
var myXmlHttpRequset = getXmlHttpObject(); //申明myXmlHttpRequset为全局变量
 
function checkName(){
        //第二根线
        if(myXmlHttpRequset){
                var myurl = "/ajax/learn/registerpro.php?username=" + $("username").value; //这里为了方便用到了下面申明实现的$函数
        myXmlHttpRequset.open("get", myurl, true);//.open("发送方法(get or post)", url, "是否异步(ture为异步，false为同步)")
                //回调函数
        myXmlHttpRequset.onreadystatechange = solve;//这里调用了下面申明实现的solve函数，Ps：不要加括号，加括号表示将返回值赋给左边变量，而非调用
        //发送数据
        myXmlHttpRequset.send(null); //因为是GET方法，所以.send(null)
 
    }else{
        //window.alert("error");
    }
 
}
 
function $(id){
    return document.getElementById(id);
}
 
 
//回调函数
function solve(){
        //第三、四根线
    if(myXmlHttpRequset.readyState == 4){
        $('res').value = myXmlHttpRequset.responseText;
    }
}
</script>
 
</head>
<body>
    <form action="registerpro.php" method="post">
        <label>账号</label>
        <input type="text" name="username" id="username" />
        <input type="button" name="check" id="check" value="检查用户名" οnclick="checkName()"/>
        <input class="check" type="text" id="res" readonly="readonly"/>
        </br>
        <label>密码</label>
        <input type="text" name="password" id="password" />
        <input type="submit" name="submit" id="submit"/>
    </form>
</body>
</html>

//registerpro.php
$username = $_GET['username'];
if($username == "lisheng"){
    echo "用户名不可用";
}else{
    echo "用户名可用";
}

lishengzxc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JavaScript实现AJAX

ajax是什么？AJAX即 “Asynchronous Javascript And XML”，（异步Javascript 和 XML），指一种创建交互式网页应用的网页开发技术。粗略的来说，AJAX技术，实现的是局部刷新页面，从而提高用户的操作体验。普通的网页交互，通常是这样浏览器与服务器直接交互的，用户将数据提交给服务器后，服务器处理后，返回给浏览器，这样造成的结果的是，用户将数
复制链接

扫一扫

专栏目录