javascript中ajax用法
随着Web应用越来越复杂,异步JavaScript和XML (Ajax) 技术被越来越多地用来实现动态Web页面。Ajax允许你通过在后台发送异步请求来动态更新Web页面,而不必刷新整个页面。在这篇文章中,我们将探讨一下JavaScript中Ajax的使用方法。
- 创建XMLHttpRequest对象
XMLHttpRequest对象是Ajax的核心。它负责发送HTTP请求和接收服务器响应。在 JavaScript 中,你可以通过创建 XMLHttpRequest 对象来启动一个 Ajax 请求。
var xhr = new XMLHttpRequest();登录后复制
如果浏览器不支持 XMLHttpRequest,可以考虑使用 ActiveXObject,如下所示:
var xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }登录后复制
- 发送 HTTP 请求
当创建完 XMLHttpRequest 对象后,可以设置请求的 URL 和方法,然后发送该请求。
xhr.open('GET', 'http://example.com/data', true); xhr.send();登录后复制
在上面的代码中,我们使用xhr.open()方法来以GET方式打开一个URL。第三个参数标示异步请求。
要标示以 POST 方式发送请求,可以使用以下代码:
xhr.open('POST', 'http://example.com/data', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('name1=value1&name2=value2');登录后复制
在上面的代码中,我们使用 xhr.setRequestHeader() 方法设置 HTTP 头信息,并使用send()方法发送请求。
- 发送表单数据
如果你需要发送表单数据,可以使用 FormData 对象。
var formData = new FormData(); formData.append('username', 'john'); formData.append('password', 'secret'); xhr.open('POST', 'http://example.com/login'); xhr.send(formData);登录后复制
在上面的代码中,我们使用 FormData 对象来发送表单数据,然后使用发送方法来发送请求。
- 处理服务器响应
在触发 XMLHttpRequest 的 readyStateChange 事件时,可以通过检查 HTTP 响应代码和响应文本来判断请求是否成功。下面是一些常见状态代码:
- 200:OK
- 404:找不到页面
- 500:服务器错误
以下是一个简单的处理函数:
xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } };登录后复制
在上面的代码中,我们使用 xhr.readyState 属性,该属性返回 XMLHttpRequest 对象的状态。如果 readyState 为 4,响应已完成。
xhr.status 属性返回 HTTP 状态代码。如果状态代码为 200,则表示成功。
xhr.responseText 属性包含服务器响应的文本。
- 处理错误
如果服务器响应的 HTTP 状态代码不是200,则认为请求失败。发生错误时,可以在给出提示后重试操作。
xhr.onerror = function() { alert('请求失败,请重试'); };登录后复制
在上面的代码中,我们使用 xhr.onerror 属性以及 alert() 方法来给出一个错误提示。
- 取消请求
如果需要取消 Ajax 请求,可以使用 xhr.abort() 方法。
xhr.abort();登录后复制
在上面的代码中,我们使用 xhr.abort() 方法来取消请求。
总结
以上是 Javascript 中 Ajax 的基本用法。Ajax 允许你动态更新 Web 页面,使得 Web 应用变得更加易于使用和响应。当使用 Ajax 时,请记住使用异步请求。
【文章原创作者:响水网站设计公司 http://www.1234xp.com/xiangshui.html 欢迎留下您的宝贵建议】