Ajax JavaScript与jQuery

最新推荐文章于 2025-09-05 11:31:06 发布

原创最新推荐文章于 2025-09-05 11:31:06 发布 · 275 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #JavaScript #jQuery

总结专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Ajax技术的概念及其在网页异步更新中的应用，并对比了原生JavaScript与jQuery库实现Ajax的不同方式，通过具体示例展示了如何使用这两种方法完成登录验证等功能。

学习Java有一段时间了，做项目的时候多多少少涉及一些Ajax的问题，今天就Ajax JavaScript 和 jQuery做一个小总结，如有问题欢迎大家指出。

Ajax

什么是 Ajax ？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

简单来说 ajax就是能让你在不刷新的情况下进行异步更新，比如微博在你不刷新的情况下提示你有新微博
这样可以在我们无需加载整个网页的情况下对网页进行更新，这样不仅提高了界面对用户的友好度，而且能够使网页更快，减少不必要的操作，是现在大多数网站都会用的技术。

JavaScript的原生ajax

以下为JavaScript原生的ajax

var xmlHttp=false; 
function createXMLHttpRequest() // XMLHttpRequest对象用于在后台与服务器交换数据      
{
    if (window.ActiveXObject)  //在IE浏览器中创建XMLHttpRequest对象
    {
        try{
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e){
            try{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(ee){
                xmlHttp=false;
            }
        }
    }
    else if (window.XMLHttpRequest) //在非IE浏览器中创建XMLHttpRequest对象
    {
        try{
            xmlHttp = new XMLHttpRequest();
        }
        catch(e){
            xmlHttp=false;
        }
    }
}

function readercheck(){
    createXMLHttpRequest();   //调用创建XMLHttpRequest对象的方法
    xmlHttp.onreadystatechange=Result;   //设置回调函数
    var url="url";
    xmlHttp.open("POST",url,true);      //向服务器端发送请求
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf8");
    xmlHttp.send(null);
}

function readercheckResult(){
    if (xmlHttp.readyState==4 && xmlHttp.status==200){
        ...
    }
}

jQuery封装$ajax

$.ajax({
        data: {
        },
        type: "post",
        url: "/",
        dataType: "json",
        error: function (data) {
            alert("错误 请重试");
            $(that).removeClass("processing");
        },
        success: function (response) {
            $(that).removeClass("processing");
          ...
        }
});

通过代码可以知道，jQuery的ajax不仅代码量小，而且很容易理解，一般在开发中会选择jQuery的ajax
在项目中，比如登录(验证账号密码是否正确) 注册(账号是否存在) 这些地方，我们完全可以不用刷新整个页面或者跳转到其他页面来实现，ajax很好的解决了这个问题。

下面放一些在项目中的实例

项目源码
https://github.com/Crearns/studenthelper
https://github.com/Crearns/Library

JavaScript

   var xmlHttp=false;
function createXMLHttpRequest()
{
    if (window.ActiveXObject)  //在IE浏览器中创建XMLHttpRequest对象
    {
        try{
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e){
            try{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(ee){
                xmlHttp=false;
            }
        }
    }
    else if (window.XMLHttpRequest) //在非IE浏览器中创建XMLHttpRequest对象
    {
        try{
            xmlHttp = new XMLHttpRequest();
        }
        catch(e){
            xmlHttp=false;
        }
    }
}
function logincheck(){
    var usernameinput = document.getElementById("usernameinput").value;
    var passwordinput = document.getElementById("passwordinput").value;
    createXMLHttpRequest();   //调用创建XMLHttpRequest对象的方法
    xmlHttp.onreadystatechange=logincheckResult;   //设置回调函数
    var url="LoginAction?action=login&username=" + usernameinput + "&password=" + passwordinput;
    xmlHttp.open("POST",url,true);      //向服务器端发送请求
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf8");
    xmlHttp.send(null);
}

function logincheckResult(){
    var usernameinput = document.getElementById("usernameinput").value;
    var passwordinput = document.getElementById("passwordinput").value;
    if (xmlHttp.readyState==4 && xmlHttp.status==200){
        var data= xmlHttp.responseText;
        document.getElementById("checkinfo").innerHTML = "";
        if(data == "false"){
            document.getElementById("checkinfo").innerHTML = "用户名或密码错误";
        }
        if (usernameinput == ""){
            document.getElementById("checkinfo").innerHTML = "用户名不能为空";
        }
        if (passwordinput == ""){
            document.getElementById("checkinfo").innerHTML = "密码不能为空";
        }
        if (usernameinput == "" && passwordinput == ""){
            document.getElementById("checkinfo").innerHTML = "用户名和密码不能为空";
        }
        if(document.getElementById("checkinfo").innerHTML == ""){
            window.location.href="main.jsp"; 
        }
    }
}

ajax

            $.ajax({
                data: {
                    username:$("#username").val(),
                    password:$("#password").val()
                },
                type: "post",
                url: "/checklogin",
                dataType: "json",
                error: function (data) {
                    alert("系统错误 请重试");
                    $(that).removeClass("processing");
                },
                success: function (response) {
                    $(that).removeClass("processing");
                    if (response == "error") {
                        $("#msg").text("用户名或密码错误");
                } else {
                    window.location.href = "/login";
                }
            }
        });