ajax请求的完整步骤
AJAX = 异步JavaScript和XML,可以使网页实现异步更新,达到局部更新的目的。
一、AJAX请求步骤如下:
1、创建XMLHttpRequest对象
var xhr;
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}
else{
var xhr = new ActiveXObject("Microsoft.XMLHttp");
}
2、向服务器发送请求
xhr.open(method,url,async);
xhr.send();//GET请求无参数,POST请求时一定要有参数
注:
- method:请求的类型 GET或POST
- url:文件在服务器上的位置,相对位置或绝对位置
- async:异步(true)同步(false)
3、服务器响应
responseText 获得字符串形式的相应数据
responseXML 获得XML形式的响应数据
4、获取服务器状态码
XMLHttpRequest有三个重要属性:onreadystatechange,readyState ,status。
- readyState 属性存有 XMLHttpRequest 的状态信息,从0-4发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
- status
200:OK
404:未找到页面
- readyState 触发onreadystatechange事件
xhr.onreadystatechange = function(){
if(xhr.readystate == 4&& xhr.status == 200){
do something;
}
}
5、简单的实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xhr;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xhr = new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 && xhr.status==200)
{
document.getElementById("myDiv").innerHTML = xhr.responseText;
}
}
xhr.open("GET","/try/ajax/ajax_info.txt",true);
xhr.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
二、AJAX 中POST和 GET的区别
POST和 GET都是向服务器发送的一种请求,只是发送机制不同。
1、GET请求会将参数跟在url后传递,POST请求是作为http消息的实体内容发送给服务器。
2、GET方式提交的数据最多只能是1024字节。
3、GET方式请求的数据会被浏览器缓存起来,别人可以读取,如帐号、密码等,相对于POST方式不安全。
4、在客户端使用GET请求时,服务器使用Request.QueryString 获取参数;在客户端使用POST请求时,服务器使用Request.Form获取参数。
5、当请求无副作用时(如进行搜索),便可使用GET方法;当请求有副作用时(如添加数据行),则用POST方法。
ajax请求的完整步骤的更多相关文章
- jQuery实现的分页功能,包括ajax请求,后台数据,有完整demo
一:需求分析 1)需要首页,末页功能 2)有点击查看上一页,下一页功能 3)页码到当前可视页码最后一页刷新页面 二:功能实现思路 也是分为三部分处理 1)点击首页,末页直接显示第一页或者最后一页内容, ...
- Ajax引擎:ajax请求步骤详细代码
说起AJAX,可能是很多同学在很多地方都看到过,各大招聘网站上对于WEB前端和PHP程序员的技能要求清单中也是必不可少的一项.但是,ajax请求步骤详细代码以及说明却比较少见到 什么是AJAX引擎? ...
- 原生js发送ajax请求
堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
- Sping MVC不使用任何注解处理(jQuery)Ajax请求(基于XML配置)
1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...
- 一步步学习javascript基础篇(9):ajax请求的回退
需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...
- 配置Chrome支持本地(file协议)的AJAX请求
什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击 ...
- AJAX请求详解 同步异步 GET和POST
AJAX请求详解 同步异步 GET和POST 上一篇博文(http://www.cnblogs.com/mengdd/p/4191941.html)介绍了AJAX的概念和基本使用,附有一个小例子,下面 ...
- extjs ajax请求与struts2进行交互
sencha extjs 5 增加一个struts2的配置,这样可以在设置好前台布局之后,与后台交互获取数据显示.现在有一个问题是struts2对于url的跳转action支 持比较良好,但是对于像E ...
- 采用指数退避算法实现ajax请求的重发,全部完成时触发回调函数
目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...
随机推荐
- zabbix添加对自定义无规则的关键日志文件的监控
zabbix添加对自定义无规则日志文件的监控 项目背景及思路: zabbix自带有针对日志文件的监控,自带的监控只能监控到指定文件或者正则匹配的固定日志文件,但当需要监控的文件名没有规律的时候自带监控 ...
- Linux中断处理(一)
最近在研究异步消息处理, 突然想起linux内核的中断处理, 里面由始至终都贯穿着"重要的事马上做, 不重要的事推后做"的异步处理思想. 于是整理一下~~第一阶段--获取中断号每个 ...
- hdu3282 链表或者对顶堆
维护序列的动态中位数 第一次用链表做题..感觉指针指来指去也挺麻烦的.. 本题链表解法就是用数组模拟出一个链表,然后离线输入所有数,排序,按照输入顺序在链表里删除元素,一次性删掉两个,然后中位数指针对 ...
- python 全栈开发,Day73(django多表添加,基于对象的跨表查询)
昨日内容回顾 多表方案: 如何确定表关系呢? 表关系是在2张表之间建立的,没有超过2个表的情况. 那么相互之间有2条关系线,先来判断一对多的关系. 如果其中一张表的记录能够对应另外一张表的多条记录,那 ...
- System.getenv()和System.getProperty() 的区别
1.System.getenv() 方法是获取指定的环境变量的值.它有两种方法,一种是接收参数为任意字符串,当存在指定环境变量时即返回环境变量的值,否则返回null.另外一种是不接受参数,那么返回的是 ...
- 利用sed把一行的文本文件改成每句一行
事实证明,至少在mac-osx上,利用sed插入一个换行符是很难的,常规的命令如: sed 's/[\.\?\!]/\n' file 是不可能的,会把那些标点符号变成n. 尝试了SO上的很多方法 ht ...
- 记一次CPU占用率和load高的排查
前不久公司进行了一次大促,晚上值班.大促是从晚上8点多开始的,一开始流量慢慢的进来,观察了应用的各项指标,一切都是正常的,因为这是双11过后的第一次大促,想着用户的购买欲应该不会太强,所以我们的运维同 ...
- 桌面版centos安装vncserver并在windows下使用VNC Viewer远程连接
首先关闭防火墙 在Centos中安装vncserver yum install tigervnc-server 拷贝一份 /lib/systemd/system/vncserver@.service ...
- DP-hdu1176
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1176 这道题与动态规划中的数塔问题十分类似,因此如果对于数塔问题还不太明白的,可以先参考一下博客: 数 ...
- 最短路(Bellman)-Hdu1874畅通工程序
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1874 题目: 某省自从实行了很多年的畅通工程计划后,终于修建了很多路.不过路多了也不好,每次要从一个城 ...