Ajax|Ajax 的基本使用
一、同步交互与异步交互
- 客户端想服务器端发送请求,直到服务器端进行响应,这个过程中,用户是不能做任何其他事情的(等)
- 客户端想服务端发送请求,直到服务端进行响应,这个过程中,用户是可以做其他事情的(不用等)
- asynchronous javascript and xml,直译中文-javascript和xml的异步
- AJAX是一种用来改善用户体验的技术,其实质是,使用XMLHttpRequest对象异步地向服务器发请求
- 服务器返回部分数据,而不是一个完整的页面,以页面无刷新的效果更改页面中的局部内容
- 【Ajax|Ajax 的基本使用】Ajax的核心对象
XMLHttpRequerst对象
- 获取XMLHttpRequest对象
function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ //除IE外的其他浏览器 xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr; }
- 属性
- readyState 请求状态
0 尚未初始化 1正在发送请求 2请求完成 3请求成功,正在接受数据 4数据接收成功
- status 请求响应值
200 表示请求成功 202 请求被接受但处理未完成 400 错误的请求 404 资源未找到 500 内部服务器错误,如asp代码错误等
- responseText 服务器返回的文本
- responseXML 服务器返回的xml,可以当做DOM处理
- readyState 请求状态
- 方法
- open(method,url) - 与服务端建立连接
- send() - 向服务器端发送请求
- abort() - 取消请求
- getAllResponseHeaders() - 得到响应的所有http头
- getResponseHeader() - 获取指定的http头
- setRequestHeader() - 指定请求的Http头
- open(method,url) - 与服务端建立连接
- 事件
onreadystatechange事件作用 - 监听服务端的通信状态改变
当Ajax对象的readyState的值发生了改变,比如,从0变成了1,就会产生readystatechange事件
- 创建XMLHttpRequest核心对象
- 与服务区建立连接
使用XMLHttpRequest对象的open(method,url)
- 向服务器发送请求
使用XMLRequest对象的send()方法
请求参数的格式 - key=value
- 接受服务器响应的数据
- 使用XMLHttpRequest对象的readystatechange事件监听服务器端的通信状态
- 使用XMLHttpRequest对象的readyState属性,判断服务器端当前状态(0-4)
- 使用XMLHttpRequest对象的statue属性,判断服务器端的状态码(200)
- 使用XMLHttp对象的responseText属性,接受服务器端的响应数据
- 使用XMLHttpRequest对象的readystatechange事件监听服务器端的通信状态
* get请求方式send()方法不起作用,但是不能被省略
xhr.send(null) 请求参数,添加到url?key=value * post请求方式xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
必须要在send()方法调用之前,使用setRequestHeader()方法设置请求头,参数为key-valueapplication/x-www-form-urlencoded 将字符串的键值对转换成数组,能够通过key获取到里面的值
推荐阅读
- 热闹中的孤独
- JAVA(抽象类与接口的区别&重载与重写&内存泄漏)
- 放屁有这三个特征的,请注意啦!这说明你的身体毒素太多
- 一个人的旅行,三亚
- 布丽吉特,人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事,我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量