深圳做网站600,沈阳网站建设公司排名,php+做网站,wechat下载一、什么是AJAX
AJAX#xff08; Asynchronous JavaScript And XML#xff09;就是异步的 JS 和 XML
通过 AJAX 可以在浏览器中向服务器发送异步请求
最大的优势#xff1a;无刷新获取数据#xff0c;就是可以在不刷新网页的情况下向服务器发送请求#xff0c;用于实现…一、什么是AJAX
AJAX Asynchronous JavaScript And XML就是异步的 JS 和 XML
通过 AJAX 可以在浏览器中向服务器发送异步请求
最大的优势无刷新获取数据就是可以在不刷新网页的情况下向服务器发送请求用于实现懒加载按需加载
AJAX 不是新的编程语言而是一种将现有的标准组合在一起使用的新方式
二、AJAX的优缺点
优点
可以无需刷新页面与服务器端进行通信 允许你根据用户行为来更新部分页面内容
缺点
没有浏览历史不能回退存在跨域问题同源对SEO 不友好
三、请求流程 如果只是测试的话可以让浏览器临时禁用 CORS WINR输入以下启用 关闭浏览器安全策略的Chrome chrome.exe --disable-web-security --user-data-dirC:\Temp !DOCTYPE html
html langzhheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleAJAX GET 请求/titlestyle.GETBox {width: 200px;height: 100px;border: 1px solid black;}/style/headbodybutton classGETBtn点击发送GET请求/buttondiv classGETBox/divscript// 获取button元素const GETBtn document.getElementsByClassName(GETBtn)[0];const GETBox document.getElementsByClassName(GETBox)[0];// 绑定点击事件GETBtn.onclick function () {// 创建对象const xhr new XMLHttpRequest();// 设置响应体类型xhr.responseType json;// 请求超时回调xhr.timeout function(){alert(请求超时);}// 请求异常回调xhr.onerror function(){alert(网络异常);}// 初始化请求设置请求方法和URL(在这里接query参数)xhr.open(GET, http://shanhe.kim/api/za/chouq.php);// 设置请求头// xhr.setRequestHeader(Content-Type, application/json);// 发送请求(send里放请求体参数)xhr.send();// 取消请求// xhr.abort();// 事件绑定处理服务端返回的结果xhr.onreadystatechange function () {// 判断 xhr对象中的状态属性-readyState// 0 UNSENT 未初始化: XHR对象已创建但尚未调用open()方法初始化请求// 1 OPENED 启动: 已调用open()方法建立与服务器的连接但尚未调用send()发送请求// 2 HEADERS_RECEIVED 发送完成: 已调用send()方法并发送请求至服务器且服务器已返回响应头HTTP状态码和响应头信息可用// 3 LOADING 接收中: 正在接收服务器返回的响应体数据部分数据可能已可用// 4 DONE 完成: 请求已完成所有响应数据包括状态码、响应头和响应体均已接收并解析完毕if (xhr.readyState 4) {// 判断响应状态码 200 401 403 404 500// 2xx 成功 3xx 重定向// 4xx 客户端错误 5xx 服务器错误if (xhr.status 200 xhr.status 300) {// 响应头console.log(xhr.getAllResponseHeaders());// 响应体console.log(xhr.response);// 将响应信息解析并放到页面中这是没设置响应体类型时的写法// GETBox.textContent JSON.parse(xhr.response).content;// 设置了响应体类型之后可以直接用GETBox.textContent xhr.response.data.draw;}}};};/script/body
/html四、AJAX的IE缓存问题
在IE浏览器下当访问同一个api时IE浏览器可能会用上一次访问时缓存的数据并不会更新到新的数据
解决方法在请求路径中带一个不会重复的query参数例如
xhr.open(GET, http://shanhe.kim/api/za/chouq.php?tDate.now());
