ajax数据请求的理解
一,请求
发送请求有两种方式:get 跟 post 。
1.get仅请求数据,不需要服务端做处理,最后会返回指定的资源。
2.post可以提交数据,服务端根据提交的数据做处理,再返回数据。
二,创建XMLHttpRequest对象
要想发起一个ajax请求,首先要创建一个请求对象,该对象提供发起请求所需要的方法,并用于装载返回的数据。
创建对象的代码如下:
/*
* 创建XMLHttpRequest的方法
* @function createXMLHttpRequest
* @return XMLHttpRequest对象
*/
function createXMLHttpRequest(){
if (window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
}
三,处理监听或者数据请求和返回的状态
XMLHTTPRequest对象的readyState属性是指返回XMLHTTP请求的当前状态。
而当XMLHTTPRequest对象的readyState属性改变时,需要调用HandleStateChange函数,代码如下:
xmlHttp.onreadystatechange= HandleStateChange;
function HandleStateChange(){
if (xmlHttp.readyState == 4){
alert(xmlHttp.responseText);
}
}
注意:
readyState属性表示返回XMLHTTP请求的当前状态。
各状态值意义如下:
0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化) 对象已建立,尚未调用send方法
2 (发送数据) send方法已调用,但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
每一个状态的改变都会触发onreadystatechange,需要进行判断,当状态码为4时,说明数据接收完毕,可以开始进行数据处理。
四,创建请求时设置数据传输的方法和路径
创建请求时设置数据传输,有两种get和post方式。
1,get请求:
xmlHttp.open('GET','ajax.txt',true);
第一个参数为请求的方式,例如:POST、GET、PUT及PROPFIND。大小写不敏感。
第二个参数为请求的地址,可以为绝对地址也可以为相对地址。
第三个参数为布尔型,指定此请求是否为异步方式,默认为true。如果为真,当状态改变时会调用onreadystatechange属性指定的回调函数。
后面还可以再附带两个参数,仅在服务器要求验证时才提供,分别为用户名及密码。
2,post请求:
POST请求,通常会提交数据到一个后台脚本页面,如asp、php、jsp等等,页面脚本处理完成后会返回数据。如:
xmlHttp.open('POST','ajax.php',true);
注意,POST请求需要设置请求头,且请求头必须在open方法之后设置,设置请求头的方法是setRequestHeader,传递两个参数,第一个是请求头字段名,第二个参数是该字段的值,根据实际情况设置不同的值。通常会设置如下:
xmlHttp.setRequestHeader('CONTENT-TYPE','application/x-www-form-urlencoded');
五,发送请求
发送请求,方法是send()。对于GET请求,该方法不需要提供参数,如果是POST请求,则将提交的数据作为参数发送,通常是JSON格式。
下面代码表示通过send发送一个请求:
xmlHttp.send();
如果是POST数据,如发送名/值对{foo:'bar'}到服务器,可以这样写:xmlHttp.send('{"foo":"bar"}');
如果只是简单的字符串,则将整个字符串作为参数传递即可,如传递"a=b":xmlHttp.send('a=b');
六,总结
基本步骤就是:
1、创建XMLHTTPRequest对象。
2、定义状态变化时的处理函数。
3、创建请求。
4、发送请求。
ajax数据请求的理解的更多相关文章
- Ajax --- 数据请求
下面主要介绍(JS原生)数据请求的主要步骤: Ajax 数据请求步骤: 1.创建XMLHttpRequest对象 2.准备数据发送 3.执行发送 4.指定回掉函数 第一步:创建XMLHttpReque ...
- VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求
开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...
- ajax数据请求5(php格式)
ajax数据请求5(php格式): <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- ajax数据请求4(xml格式)
ajax数据请求4(xml格式): <!doctype html> <html> <head> <meta charset="utf-8" ...
- ajax数据请求3(数组json格式)
ajax数据请求3(数组json格式) <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- ajax数据请求2(json格式)
ajax数据请求2(json格式) <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- AJAX数据请求
ajax数据请求需要四个步骤:(请求文本内容) 1.创建XMLHttpRequest对象: 2.打开与服务起的链接: 3.发送给服务器: 4.响应就绪. <!DOCTYPE html> & ...
- 微信小程序的ajax数据请求wx.request
微信小程序的ajax数据请求,很多同学找不到api在哪个位置,这里单独把小程序的ajax请求给列出来,微信小程序的请求就是wx.request这个api,wx.request(一些对象参数),微信小程 ...
- 同步请求和异步请求的区别,ajax异步请求如何理解
同步请求和异步请求的区别 先解释一下同步和异步的概念 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的 ...
随机推荐
- 使用加密的squid配合stunnel实现HTTP代理
现在大部分人都是用ssh tunnel来搭建socks5代理,其实这种方式效率并不高,ssh tunnel并不是为了做代理而存在的.一个比较好的方法是加密squid配合stunnel实现http代理. ...
- echarts Y轴刻度保留几位小数
yAxis: [ { type: 'value', name: '雨量(mm)', nameLocation: 'start', inverse: true, axisLabel: { ...
- .Net 单例模式(Singleton)
每台计算机可以有若干个打印机,但只能有一个Printer Spooler, 以避免两个打印作业同时输出到打印机中.每台计算机可以有若干传真卡,但是只应该有一个软件负责管理传真卡,以避免出现两份传真作业 ...
- Android实现短信监听并且转发到指定的手机号,转发后不留痕
转载:http://blog.csdn.net/swqqcs/article/details/7252419 通过这些代码也可以对远程手机实现短信控制.有兴趣的可以自己改一下,说一下简单的原理,要实现 ...
- Apache Nifi 开发
Apache NiFi是由美国过国家安全局(NSA)贡献给Apache基金会的开源项目.其设计目标是自己主动化系统间的数据流.基于其工作流式的编程理念.NiFi很易于使用,强大.可靠及高可配置. 两个 ...
- Mongo同步数据到Elasticsearch
个人博客:https://blog.sharedata.info/ 最近需要把数据从Mongo同步到Elasticsearch环境:centos6.5python2.7pipmongo-connect ...
- Android开发:《Gradle Recipes for Android》阅读笔记(翻译)2.7——使用Android Studio签署发布apk
问题: 想要使用Android studio生成签名配置,给他们分配build类型. 解决方案: Build菜单提供了生成签名配置,Project Structure窗口有tab用于分配不同的type ...
- java中对Redis的缓存进行操作
Redis 是一个NoSQL数据库,也是一个高性能的key-value数据库.一般我们在做Java项目的时候,通常会了加快查询效率,减少和数据库的连接次数,我们都会在代码中加入缓存功能.Redis的高 ...
- NOIP2011提高组(选择客栈)
题目链接:http://codevs.cn/problem/1135/ 题目大意:中文题...就不解释了 题目思路:看了其他巨巨的blog写的,dp思路 #include <iostream&g ...
- 【BZOJ3083/3306】遥远的国度/树 树链剖分+线段树
[BZOJ3083]遥远的国度 Description 描述zcwwzdjn在追杀十分sb的zhx,而zhx逃入了一个遥远的国度.当zcwwzdjn准备进入遥远的国度继续追杀时,守护神RapiD阻拦了 ...