AJAX（一、基本知识）
AJAX:Asynchronous （[ə'sɪŋkrənəs; eɪ-]）Javascript （['dʒɑ:və,skrɪpt]）and XML 异步的Javascript和XML
AJAX不是新的编程语言，而是一种使用现有标准的新方法
百度百科解释：
variable=new XMLHttpRequest();
但是老版本的IE5、IE6使用ActiveX对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");
因此为了适应所有的浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2.XMLHttpRequest对象用于和服务器交换数据
如果需要将请求发送到服务器，我们使用XMLHttpRequest对象的open()和send()方法：
open(method,url,async)
规定请求的类型，URL 以及是否异步处理请求。
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）
send(string)
将请求发送到服务器。
- string：仅用于 POST 请求
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
下面是ajax请求本地.txt文件的全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax请求本地.txt文件</title>
<script>
window.onload = function () {
var btn = document.getElementById('btn'); btn.onclick = function () {
//创建XHR对象
var xhr = new XMLHttpRequest(); //请求的方式，地址，是否异步 test.txt和该html文件在同一级目录
xhr.open('get', 'test.txt', true); //请求的确定操作，初始化，相当于搜索时，敲击的回车
xhr.send(null); //请求的readyState每变化一次就执行一次onreadystatechange函数
//其中readyState表示的是：请求/响应过程的当前活动阶段
//readyState有如下取值
/*
* 0：未初始化，尚未调用send()方法
* 1: 启动
* 2：发送
* 3：接收
* 4：完成
*/
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status==200) {
alert(xhr.responseText);
}
}
};
};
</script>
</head>
<body>
<input type="button" id="btn" value="click">
</body>
</html>
效果：
3.AJAX——服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
responseText:获得字符串形式的响应数据。
responseXML:获得 XML 形式的响应数据。
如果来自服务器的响应并非 XML，请使用 responseText 属性。responseText 属性返回字符串形式的响应，因此可以这样使用：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
4.AJAX - onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息:
onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState:
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
status: 200: "OK" 404: 未找到页面
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
上面就是最基础的AJAX使用方法。
AJAX（一、基本知识）的更多相关文章
- ajax的一部分知识
jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...
- ajax的小知识---总是得到重复的数据
按xmlhttp.open("GET","/try/ajax/demo_get.php",true);发送,可能会得到缓存中的结果; 可以改为xmlhttp.o ...
- Comet——反向Ajax （基础知识）
Comet:服务器推送,与ajax页面向服务器请求数据相反.几乎可以实时将数据推送到客户端. 但本质一样:浏览器向服务器发起请求,服务器响应请求 Comet实现方式:长轮询.HTTP流 1.长轮询—— ...
- Python全栈开发之18、cookies、session和ajax等相关知识
一.cookies 本质为在浏览器端保存的键值对,由服务端写在浏览器端,以后每次请求的时候,浏览器都携带着cookie来访问,cookies的使用之处非常多,比如用户验证,登陆界面,右侧菜单隐藏,控制 ...
- ajax的相关知识总结
一.ajax的工作原理 a.创建XMLHttpRequeat对象 var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, ...
- Ajax——异步基础知识（三）
封装异步请求 1.将函数作为参数进行使用 2.因为获取数据是在一个注册事件中获取的,所以只有事件触发的时候才会调用此函数 <!DOCTYPE html> <html lang=&qu ...
- Ajax——异步基础知识（二）
XML数据格式 首行必须是版本号和格式等信息 <?xml version="1.0" encoding="utf-8" ?> 最外层需要一个根节点进 ...
- Ajax——异步基础知识（一）
基础概念 1.异步请求可以做到偷偷向服务器发送请求,而页面却不刷新 2.get异步请求传递参数是通过url追加键值对的方式 3.post异步请求比较特殊,需要设置请求的类型 User-Agent:浏览 ...
- Ajax——php基础知识（一）
AMP环境 AMP(Apache.MySQL.PHP)是三个独立的软件,但是对于初学者而言分别安装以及配置需要掌握一定的软件知识,所以就有了很多AMP集成环境帮助我们简化安装 ——WAMP WAMP安 ...
- js的AJAX请求有关知识总结
什么是AJAX?AJAX作用是什么? async javascript and xml(异步的javascript和xml) 作用:实现局部刷新 async:我们真实项目中一般使用AJAX从服务器端获 ...
随机推荐
- Java 接口练习题
中国特色社会主义的体制中有这样的现象:地方省政府要坚持党的领导和按 照国务院的指示进行安全生产.请编写一个java应用程序描述上述的体制现象. 要求如下: (1)该应用程序中有一个“党中央”接口:Ce ...
- CSS3 -webkit-transform
scale:缩放,1为原始大小.scale(x).正数放大,负数缩小.属性值为一个时,x/y轴同时缩放:属性值为两个值时,分别控制x.y轴的缩放 rotate:水平旋转,属性值格式为Xdeg.(deg ...
- 【转载】DOS 系统和 Windows 系统有什么关系？为什么windows系统下可以执行dos命令？
作者:bombless 因为不同的系统都叫 Windows ,这些系统在界面上也有一定连续性并且因此可能造成误解,所以有必要稍微梳理一下几个不同的 Windows 系统.首先是 DOS 上的一个图形界 ...
- JSP Filter用法
1.filter的作用 在HttpServletRequest请求到达Servlet之前,拦截客户的HttpServletRequest 根据需要检查HttpServletRequest的相关信息,修 ...
- Django 1.10 找不到静态资源解决方法
测试版本:Django 1.10 问题:Django项目找不到静态资源 解决方法: 1.首先你需要在自己的app下面创建2个目录 static 和 templates 树形结构如下(DjangoPr ...
- webpack配置命令
从2015年开始,webpack就是当前最火的构建工具.跟着时代向前走.准没错.我们要追随大神的脚步.走在前端技术栈的前列.大神等等我. 由于webpack是基于nodejs环境下的.所以先安装nod ...
- eclipse最有用快捷键整理
在网上搜eclipse快捷键,可以搜出一大堆,大多罗列了n多的快捷键,估计大部分人看了以后都会头大的,我也头大,不过我一一尝试了一遍,整理出了eclipse最常用最有用,写代码必须用到的一些快捷键,大 ...
- 企业办公3D指纹考勤系统解决方案
员工准时.正常出勤是企业考勤制度的基本要求,然而目前签名式.卡钟式.IC卡考勤系统均存在代打卡.人情卡.不易统计等漏洞,而市面上的光学指纹考勤机存在识别能力差.识别速度慢.使用寿命短.不能完全杜绝指纹 ...
- 【Android】解决新建的xml文件无法正常加载的问题
新建一个xml布局文件,如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm ...
- Codeforces Round #388 (Div. 2) A,B,C,D
A. Bachgold Problem time limit per test 1 second memory limit per test 256 megabytes input standard ...