[个人笔记]ajax使用步骤
来源:互联网 发布:hadoop windows 可行 编辑:程序博客网 时间:2024/05/16 01:07
本文仅为个人初步学习笔记,,如有不足或问题,,欢迎各位大神提出补充和改正
ajax(asynchronous javascript and xml 异步地)
(1)ajax是一种用来改善用户体验的技术,其本质是利用浏览器提供的一个特殊对象(XMLHttpRequest对象,也可以称之为ajax对象)想服务器发送异步请求,服务器返回部分数据,浏览器利用这些数据,对当前页面做部分更新.整个过程页面无刷新,不打断用户的操作.
异步请求,指的是当这个对象向服务器发送请求时,浏览器不会销毁当前页面,用户仍然可以对当前页面做其它操作.
(2)如何获得ajax对象?
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
//非IE
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('MicroSoft.XMLHttp');
}
return xhr;
}
(3)ajax对象的几个重要属性
1)onreadystatechange:绑定事件处理函数(处理readystatechange事件).
注:当ajax对象的readyState属性值发生了任何改变(比如从0变成了1,就会产生readystatechange事件).
2)readyState:有五个值(0,1,2,3,4),表示ajax对象与服务器通信的状态(进展).4表示ajax对象已经获得了=服务器返回的所有的数据.
3)responseText:获取服务器返回的文本
4)responseXML:获取服务器返回的XML
5)status:获得状态码
(4)编程步骤
step1.获得ajax对象
例:
var xhr = getXhr();
step2.发送请求
情况一:发送get请求
xhr.open('get','check.do?uname=King',true);
xhr.onreadystatechange = f1;
xhr.send(null);
//true:异步请求,,,false:同步请求(当ajax对象发送请求的时候,浏览器会锁定当前页面,用户不能够对当前页面做其它操作).
情况二:发送post请求
xhr.open('post','check.do',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange = f1;
xhr.send('uname=King');
//按照http协议要求,如果发送的是post请求,在请求数据包里面,应该包含一个消息头("content-type").因为ajax对象默认情况下,不会添加该消息头,所以要调用setRequestHeader方法.
step3.编写服务器端的程序
通常只需要返回部分数据
step4.在事件处理函数里面,处理服务器返回数据.
function f1(){
if(xhr.readyState == 4 && xhr.status == 200){
//必须保证已经收到了服务器返回的所有数据,并且没有出错
//获得服务器返回的数据(文本)
var txt = xhr.responseText;
//下面是更新页面
......
}
}
例:
//onblur:失去焦点事件
整体思路:
//此图是借鉴自我培训班的老师笔记
- [个人笔记]ajax使用步骤
- [个人笔记]mybatis-spring使用步骤
- ajax个人学习笔记
- 初学ajax使用步骤
- Ajax的使用步骤
- ajax使用步骤
- jQuery使用Ajax步骤
- ajax的使用步骤
- Ajax使用步骤
- 富途入金步骤记录(个人使用)
- 个人笔记(AJAX篇)
- 使用ajax的固定步骤
- Ajax使用的四大步骤
- Ajax.dll 使用步骤说明
- Ajax使用的四大步骤
- Ajax的使用四大步骤
- Ajax的使用四大步骤
- Ajax 的使用步骤 封装Ajax
- 出门“带脸”就行?人脸识别成“香饽饽”
- java中的长连接和短连接
- ThinkPHP 3.1 快速入门
- 详解HaProxy
- Shader 基础使用(三) ----- vertex & fragment
- [个人笔记]ajax使用步骤
- vcs ucli 仿真中突然断电 防止措施
- spring 定时任务之行两次
- 微信小程序 填坑(--持续更新)
- 牛腩记账本core版本源码
- 数据库分页(一)
- python实例(水仙花数)
- Organic polysilazane
- ZOJ 3878 Convert QWERTY to Dvorak