浪潮云网站建设搜索引擎站长平台
ajax的优点
- 可以无需刷新页面而与服务器进行通信
- 允许你根据用户事件来更新部分页面内容
ajax的缺点
- 没有浏览历史，不能回退
- 存在跨域问题
- SEO不友好
get请求
<button>点击发送请求</button><div id="result"></div><script>const btn = document.getElementsByTagName('button')[0];const result = document.getElementById('result');btn.onclick = function() {//创建对象const xhr = new XMLHttpRequest();//超时设置2s设置xhr.timeout = 2000;//超时回调xhr.ontimeout=function(){alert("网络异常，请稍后重试！！");}//网络异常回调xhr.onerror=function(){alert("你的网络似乎出了一点问题！");}//设置响应体数据的类型//xhr.responseType = 'json';//初始化 设置请求方法和urlxhr.open('GET', 'http://127.0.0.1:8000/server');//请求参数xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200');//设置请求头xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//发送xhr.send();//事件绑定 处理服务器返回的结果//readystate是xhr对象中的属性，表示状态 0 1 2 3 4//0表示未初始化 1表示open方法调用完毕 2表示send方法调用完毕//3表示服务端返回部分结果 4表示服务端返回所有结果xhr.onreadystatechange = function() {//判断（服务端返回了所有的结果）if (xhr.readyState === 4) {//判断响应状态码 200 404 500//2xx 2开头都代表成功if (xhr.status >= 200 && xhr.status < 300) {console.log(xhr.status); //状态码console.log(xhr.statusText); //状态字符串console.log(xhr.getAllResponseHeaders); //所有响应头console.log(xhr.response); //响应体result.innerHTML = xhr.response;}}}}
</script>
post请求和get请求差不多
post通过send()设置请求体，比如send(‘a=100&b=200’)
abort()方法可以手动取消ajax请求