一个完整的ajax请求

function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
           alert(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET","http://localhost:8080/wholeEvaluation/paperList/?createUserName=111222",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("null");
}
loadXMLDoc();
### 如何在本地环境使用 JavaScript 或 jQuery 模拟 AJAX 请求 #### 使用原生 JavaScript 实现 AJAX 请求 可以通过 `XMLHttpRequest` 对象来实现一个简单的 AJAX 请求。以下是一个完整的例子,展示如何通过 GET 方法向服务器发送请求并接收响应: ```javascript function sendAjaxRequest() { var xhr = new XMLHttpRequest(); // 创建 XMLHttpRequest 对象[^1] xhr.open('GET', 'http://localhost:8080/data.json', true); // 配置请求方法、URL 和异步标志[^2] xhr.onreadystatechange = function () { // 设置回调函数监听状态变化 if (xhr.readyState === 4 && xhr.status === 200) { // 当请求完成且成功时 console.log(xhr.responseText); // 输出返回的数据 } }; xhr.send(); // 发送请求 } sendAjaxRequest(); ``` 此代码片段展示了如何利用原生 JavaScript 的 `XMLHttpRequest` 来发起一个 GET 请求,并处理其响应。 --- #### 使用 jQuery 实现 AJAX 请求 如果希望简化 AJAX 请求的过程,可以借助 jQuery 提供的封装好的 API。以下是基于 jQuery 的简单示例: ```javascript $(document).ready(function () { $.ajax({ url: 'http://localhost:8080/data.json', // 请求的目标 URL[^3] type: 'GET', // HTTP 请求方法 success: function (response) { // 成功后的回调函数 console.log(response); }, error: function (error) { // 错误处理函数 console.error('Error:', error); } }); }); ``` 在此代码中,jQuery 的 `.ajax()` 方法被用来执行 AJAX 请求。它允许开发者更方便地指定参数以及定义成功的错误处理逻辑。 --- #### 在本地环境中运行 AJAX 请求 为了测试上述 AJAX 请求,在本地环境中需要满足以下几个条件: 1. **启动本地服务器**:由于浏览器的安全策略(CORS),无法直接从文件系统访问资源。因此,建议安装轻量级 Web 服务器工具,如 Python 自带的 SimpleHTTPServer 或 Node.js 中的 http-server 工具。 - 如果使用 Python 启动服务器,可以在项目根目录下运行命令: ```bash python -m http.server 8080 ``` 2. **准备目标数据文件**:创建一个 JSON 文件(例如 `data.json`),放置于服务器可访问路径下。该文件的内容可能类似于下面这样: ```json { "name": "Test", "age": 25, "city": "Beijing" } ``` 3. **调整请求地址**:确保 AJAX 请求中的 URL 正确指向本地服务器上的资源位置。 --- #### 注意事项 - 浏览器可能会因为跨域资源共享(Cross-Origin Resource Sharing, CORS)政策阻止某些类型的请求。在这种情况下,需确认服务器端已启用 CORS 支持[^2]。 - 若采用 POST 请求,则应设置合适的 Content-Type 并传递数据体作为第二个参数给 `xhr.send(data)` 函数或者 jQuery 的 `data` 属性[^3]。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值