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请求的完整步骤的更多相关文章

  1. jQuery实现的分页功能,包括ajax请求,后台数据,有完整demo

    一:需求分析 1)需要首页,末页功能 2)有点击查看上一页,下一页功能 3)页码到当前可视页码最后一页刷新页面 二:功能实现思路 也是分为三部分处理 1)点击首页,末页直接显示第一页或者最后一页内容, ...

  2. Ajax引擎:ajax请求步骤详细代码

    说起AJAX,可能是很多同学在很多地方都看到过,各大招聘网站上对于WEB前端和PHP程序员的技能要求清单中也是必不可少的一项.但是,ajax请求步骤详细代码以及说明却比较少见到 什么是AJAX引擎? ...

  3. 原生js发送ajax请求

    堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...

  4. Sping MVC不使用任何注解处理(jQuery)Ajax请求(基于XML配置)

    1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...

  5. 一步步学习javascript基础篇(9):ajax请求的回退

    需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...

  6. 配置Chrome支持本地(file协议)的AJAX请求

    什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击 ...

  7. AJAX请求详解 同步异步 GET和POST

    AJAX请求详解 同步异步 GET和POST 上一篇博文(http://www.cnblogs.com/mengdd/p/4191941.html)介绍了AJAX的概念和基本使用,附有一个小例子,下面 ...

  8. extjs ajax请求与struts2进行交互

    sencha extjs 5 增加一个struts2的配置,这样可以在设置好前台布局之后,与后台交互获取数据显示.现在有一个问题是struts2对于url的跳转action支 持比较良好,但是对于像E ...

  9. 采用指数退避算法实现ajax请求的重发,全部完成时触发回调函数

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

随机推荐

  1. windows环境变量PATH顺序的重要性

    PATH是路径的意思,PATH环境变量中存放的值,就是一连串的路径.不同的路径之间,用英文的分号间隔开.系统在执行用户命令时,若用户未给出绝对路径,则首先在当前目录下寻找相应的可执行文件.批处理文件等 ...

  2. PHP框架CodeIgniter--URL去除index.php

    今天学习CodeIgniter简称CI的第一天,记录下学习心得. CI中国https://codeigniter.org.cn/user_guide/general/urls.html?highlig ...

  3. centos7.2环境下安装smokeping对网络状态进行监控

    centos7.2环境下安装smokeping对网络状态进行监控 安装smokeping建议用centos7,用centos6.5一直卡在smokeping那里,下载不了perl的扩展插件,可能是因为 ...

  4. mysql删除数据库文件ibdata1后引发的故障

    进行性能测试是发现大量报错: Duplicate entry主键重复 可以看到mysql数据库中已经没有innodb引擎启动信息了 之前发现ibdata1占用了大量硬盘,为了省出空间删除了数据库ibd ...

  5. Android数据存储:SQLite

    Android数据存储之SQLite SQLite:Android提供的一个标准的数据库,支持SQL语句.用来处理数据量较大的数据.△ SQLite特征:1.轻量性2.独立性3.隔离性4.跨平台性5. ...

  6. cf Queries on a String

    #include<iostream> #include<cstring> #include<cstdio> using namespace std; #define ...

  7. Masm615+notepad++6.8.8搭建汇编开发环境

    前言:很早以前搭过,做了笔记的.现在重新玩汇编,按照笔记撘环境,谁知道坑了自己两个小时,气的我现在打字手都在抖 准备工作: 1.Masm615汇编环境,下载地址:https://pan.baidu.c ...

  8. java 判断字符串什么编码类型

    public static String getEncoding(String str) { String encode = "GB2312"; try { if (str.equ ...

  9. Oracle学习笔记--第3章 使用sql*plus工具

    使用sql*plus工具 1.sqlplus连接方式示例 sqlplus system/123[as sysdba]; 2.查看表结构命令;desc[ribe] e.g.      desc scot ...

  10. 《剑指offer》-和为S的正整数序列

    双指针问题.似曾相识. /* 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括 ...