ajax是一种异步请求数据的技术,对用户体验和程序性能有帮助
新建一个ajax对象
var xmlhttp
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest()
}else {
xmlhttp = new ActiveXObject()
}
连接服务器
open(method[GET, POST], url (服务器的地址,相对或者绝对位置), async(true是异步, false是同步))
- get请求
xmlhttp.open('GET', 'http://www.baidu.com', false)
- post请求
xmlhttp.open('POST', 'http://www.baidu.com', false)
发送参数
- get 方式 发送信息时直接加参数到url上就可以,比如url?a=a1&b=b1
xmlhttp.send()
- post方式
post请求一定要设置请求头的格式内容
json:内容类型 send里的json要用JSON.stringify包装
xmlhttp.setRequestHeader('content-type', 'application/json; charset=utf-8')
xmlhttp.send(
JSON.stringify({
name:'ss',
age:18
})
)
form:表单类型
<form name="myForm" action="http://localhost:3000/a" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="name">
<input type="submit" value="提交">
</form>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
xmlhttp.setRequestHeader('content-type', 'application/x-www-form-urlencoded; charset=utf-8')
tips:让表单提交后不跳转的方法
写一个iframe,它的name赋值给form的target
<form target='myIframe'></form>
<iframe id="myIframe" name="myIframe"></iframe>
文本
xmlhttp.setRequestHeader('content-type', 'text/plain; charset=utf-8')
文件上传(不对字符编码)
xmlhttp.setRequestHeader('content-type', 'multipart/form-data; charset=utf-8')
服务器响应
如果async选择同步处理(false),会等待服务器响应,省去额外的onreadystatechange代码
<div id="mydiv"></div>
document.getElementById("mydiv").innerHTML = xmlhttp.responseText
异步处理–onreadystatechange事件是代码复杂化,这是在没有得到服务器响应的情况下,防止代码停止的最安全的方法
<div id="mydiv"></div>
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("mydiv").innerHTML = xmlhttp.responseText
}
}
五种请求状态(readyState )
- 0 请求未初始化
- 1 服务器连接已建立
- 2 请求已接收
- 3请求处理中
- 4 请求已完成, 且响应已就绪
status
- 200 ok
- 304 该资源在上次请求后没有任何修改(浏览器缓存, 使用get的时候尤为注意)
- 403 forbiden
- 404 not found
- 408 请求超时
- 500 服务器内部错误