Ajax的简单使用

最新推荐文章于 2024-01-29 17:41:50 发布

原创最新推荐文章于 2024-01-29 17:41:50 发布 · 386 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax技术

ajax技术专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Ajax技术的基本概念，包括异步JavaScript和XML的工作原理，并详细解释了如何使用Ajax发送GET和POST请求来实现局部刷新页面的功能。

1.什么是Ajax

Ajax为异步的JavaScript和xml，采用XMLHttpRequest对象异步的向服务器发送请求，服务器返回部分数据，以页面无刷新的效果更改页面局部
内容(局部刷新页面)。

2.使用Ajax

1>利用Ajax发送get请求
网页中注册的时候通常要对用户名是否存在进行验证，此处利用该例来演示Ajax get请求。

function check() {
   //进行url的拼接，后面加上要验证的用户名
   var url = "/Home/register?username="
          + document.getElementById("register-name").value;
   //获取Ajax对象
   if (window.XMLHttpRequest)
       req = new XMLHttpRequest();
   else if (window.ActiveXObject)
       req = new ActiveXObject("Microsoft.XMLHTTP");
   if (req) {
       //创建get请求
       req.open("get", url, true);
       //编写回调事件处理函数
       req.onreadystatechange = function () {
        if (req.readyState == 4) {
            //获取返回的数据
            var result = req.responseText;
            //对结果进行判断
            if (result == true) {
                ...
            } else {
                ...
         }
        }
    };
       //发送get请求
       req.send(null);
   }
}

2>利用Ajax发送Post请求

//对获取Ajax对象的方法进行封装
function getRequest(){
    var req=null;
    if (window.XMLHttpRequest){
        req = new XMLHttpRequest();
    }else{
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return req;
}
function submit() {
    var req = getRequest();
    if (req != null) {
        //创建Post请求
        req.open('post', 'x.do', true);
        //必不可少，添加Post请求的Content-Type消息头
        req.setRequestHeader("Content-Type",
                    "application/x-www-form-urlencoded");
        //编写回调事件处理函数
        req.onreadystatechange = function () {
            if (req.readyState == 4) {
                var result = req.responseText;
                ...
            }
        };
        //当Post传递多个参数的时候，对数据进行JSON封装
        var data = {"param1": 1, 'param2': 2};
        //将JSON对象转为JSON串后，发送Post请求
        req.send('data=' + JSON.stringify(data);
    }
}

Ajax的简单实用就介绍到这里啦~