ajax,json学习笔记(二)XMLHttpRequest对象
来源:互联网 发布:淘宝 刷单 没有权重 编辑:程序博客网 时间:2024/05/18 00:53
原生的ajax通过XMLHttpRequest对象实现,就是我们看到的XHR
XHR对象(IE6不含)
1、构造
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObect("Microsoft.XMLHTTP");
}
2、通过XMLHttpRequest发送请求
消息头:open(method,url,async):(发送请求方法,请求地址,请求同步/异步)默认true)
设置后可以调用http请求了
消息主体:send(String)
通过send发送请求
一般post请求不通过send直接发请求
open("post","create",true)
request.setRequestHeader("Contend-type","application/x-www-form-urlencoded");
// 写在open和send之间
request.send("name=哈哈&sex=男");
注:Contend-type:http://blog.csdn.net/blueheart20/article/details/45174399
MediaType,即是Internet Media Type,互联网媒体类型;也叫做MIME类型
在Http协议消息头中,使用Content-Type来表示具体请求中的媒体类型信息
例如: Content-Type: text/html;charset:utf-8;
常见的媒体格式类型如下:
text/html : HTML格式
text/plain :纯文本格式
text/xml : XML格式
image/gif :gif图片格式
image/jpeg :jpg图片格式
image/png:png图片格式
以application开头的媒体格式类型:
application/xhtml+xml :XHTML格式
application/xml : XML数据格式
application/atom+xml :Atom XML聚合格式
application/json : JSON数据格式
application/pdf :pdf格式
application/msword : Word文档格式
application/octet-stream : 二进制流数据(如常见的文件下载)
application/x-www-form-urlencoded : <form encType=””>中默认的encType,form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式)
另外一种常见的媒体格式是上传文件之时使用的:
multipart/form-data : 需要在表单中进行文件上传时,就需要使用该格式
以上就是我们在日常的开发中,经常会用到的若干content-type的内容格式。
3、XMLHttpRequest取得响应
监听readyState属性变化
0:请求为初始化,open还没调用
1:服务器连接已建立,open已经调用了
2:请求被接收,接收到头信息
3:请求处理中,接收到响应主体
4:请求已完成,且响应已就绪,响应完成了
request.onreadystatechange=function(){ // 监听readyState变化
if(request.readyState == 4 && request.statue == 200) // 响应完成且请求成功
{ // 做一些事情 request.responseText }
}
responseText:获取字符串形式响应数据
responseXML:获取XML形式响应数据
status、statusText:以数字和文本形式放回HTTP状态码
getAllResponseHeader():获取所有响应报头
getResponse Header():查询响应中某个字段的值
4、建立一个XMLHttpRequest异步请求的完整代码
var ajax = function(){
var request ;
if (window.XMLHttpRequest){
request=new XMLHttpRequest();
}else{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
request.open("get","http://localhost:8080/MyFirstSSM/listCategory",true);
request.send();
request.onreadystatechange=function(){ // 监听readyState变化
if(request.readyState == 4){
if(request.status == 200){
// 直接获取后台数据
$("#test2").text("${cs}");
console.log("success");
}
else{
console.log("error");
}
}
}
}
$("#test1").click (ajax);
5、json用于大量数据返回
后面讲JSON
- ajax,json学习笔记(二)XMLHttpRequest对象
- AJAX学习笔记(二)_创建XMLHttpRequest对象
- AJAX学习笔记(三)——XMLHttpRequest 对象
- AJAX学习笔记一(认识XMLHttpRequest对象)
- AJAX 学习笔记(1) XMLHttpRequest对象概述
- ajax学习(XMLHttpRequest对象readyState属性)
- AJAX(二)--核心对象XMLHttpRequest
- SpringMVC学习笔记(八):Ajax用法二(借助json传对象数据)
- JSON学习笔记(二)- 对象
- Ajax学习笔记——XMLHttpRequest对象发送request
- AJAX学习笔记:创建XMLHttpRequest对象的五步骤
- AJAX学习笔记:创建XMLHttpRequest对象的五步骤
- 传智播客ajax学习,XMLHttpRequest 对象
- 学习Ajax之XMLHttpRequest对象
- XMLHttpRequest对象学习笔记(一)
- jquery+ajax+json+asp.net学习笔记(二)
- ajax学习笔记:ajax原态-XmlHttpRequest
- Ajax学习系列2- 核心对象XMLHttpRequest
- CPIO文件的解压与制作
- NOIP2017 爆炸记
- 微信小程序开发-网络请求
- 在python3的matplotlib下实现不同颜色散点图
- 大数据预科20(补充之网络编程)
- ajax,json学习笔记(二)XMLHttpRequest对象
- python数据可视化系列教程——matplotlib绘图全解
- 洛谷P1060 开心的金明
- DateBase-事务
- java的equlas()方法与==运算符浅析
- 第三次作业P141
- 初识c++类(笔记)
- 私有云落地解决方案之网络篇-关键技术-DHCP地址-1
- Python 余弦相似性应用