一,请求

发送请求有两种方式: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数据请求的理解的更多相关文章

  1. Ajax --- 数据请求

    下面主要介绍(JS原生)数据请求的主要步骤: Ajax 数据请求步骤: 1.创建XMLHttpRequest对象 2.准备数据发送 3.执行发送 4.指定回掉函数 第一步:创建XMLHttpReque ...

  2. VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求

    开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...

  3. ajax数据请求5(php格式)

    ajax数据请求5(php格式): <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  4. ajax数据请求4(xml格式)

    ajax数据请求4(xml格式): <!doctype html> <html> <head> <meta charset="utf-8" ...

  5. ajax数据请求3(数组json格式)

    ajax数据请求3(数组json格式) <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  6. ajax数据请求2(json格式)

    ajax数据请求2(json格式) <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  7. AJAX数据请求

    ajax数据请求需要四个步骤:(请求文本内容) 1.创建XMLHttpRequest对象: 2.打开与服务起的链接: 3.发送给服务器: 4.响应就绪. <!DOCTYPE html> & ...

  8. 微信小程序的ajax数据请求wx.request

    微信小程序的ajax数据请求,很多同学找不到api在哪个位置,这里单独把小程序的ajax请求给列出来,微信小程序的请求就是wx.request这个api,wx.request(一些对象参数),微信小程 ...

  9. 同步请求和异步请求的区别,ajax异步请求如何理解

    同步请求和异步请求的区别 先解释一下同步和异步的概念 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的 ...

随机推荐

  1. js中级系列:模块化(转载 学习中。。。。)

    从 CommonJS 到 Sea.js https://github.com/seajs/seajs/issues/269 CMD(Common Module Definition) 模块定义规范 h ...

  2. Emoji表情图标在iOS与PHP之间通信及MySQL存储

    在某个 iOS 项目中,需要一个服务器来保存一些用户数据,例如用户信息.评论等,我们的服务器端使用了 PHP+MySQL 的搭配.在测试过程中我们发现,用户在 iOS 端里输入了 Emoji 表情提交 ...

  3. int abs(int number)函数有感: 求补码和通过补码求对应的整数 C++(增加:数字的二进制表示中1的个数)

    #include "limits.h" #include "math.h" int abs(int number) { int const mask = num ...

  4. D. Powerful array 离线+莫队算法 给定n个数,m次查询;每次查询[l,r]的权值; 权值计算方法:区间某个数x的个数cnt,那么贡献为cnt*cnt*x; 所有贡献和即为该区间的值;

    D. Powerful array time limit per test seconds memory limit per test megabytes input standard input o ...

  5. Oracle基础学习登陆SQLPLUS(一)

    SQLPLUS是ORACLE公司开发的非常简洁的管理工具,SQLPLUS是最好的,最核心的ORACLE管理工具.SQLPLUS简洁而高效,舍弃浮华,反璞归真.使用sqlplus,进入sqlplus并进 ...

  6. Swift 开源 Linux Ubuntu Install

    Swift 开源了,它现在变成跨平台的了,开源后的 Swift 不止能运行在 MAC 和 iOS 平台,现在也可以运行在 Linux 平台了.swift.org 网站上面提供了在 Linux 上面安装 ...

  7. Thinkphp5 使用命令行模式(cli模式)

    Tp5的cli模式跟Tp3.2变化较大,有自己的一套方式,在这里做个搬运工,把Tp文档的东西搬运过来,方便大家. 原出处截图 创建自定义命令行 第一步,配置command.php文件,目录在appli ...

  8. mySQL 开启事件存储过程

    怎样在Navicat中设置,是数据库按照记录中的日期更新状态字段 其实这个很常用,比如你网站里的某条记录的日期——比如说数据库中某条活动记录的审核日期字段已经过期,亦即当前时间已经超过审核日期,那么定 ...

  9. ASP.NET动态网站制作(30)-- WEBService

    前言:继续讲正则表达式,然后介绍一下webservice. 内容: 1.匹配QQ号的正则表达式:^[1-9]\d{4,10}$:匹配手机号的正则表达式:^(0|86)?(13|14|15|18)[0- ...

  10. ios - UINavigationBar添加背景图片的几种简单思路

    UITabBarController下面常常需要为多个ViewController设置导航栏样式,总结了一下遇到过的为UINavigationBar添加背景图片的几种简单思路 以设置背景图片为例: 第 ...