AJAX基础

Tags: ajax学习笔记
ajax是一种在无需加载整个网页情况下还能更新部分网页的技术

什么是ajax

：AJAX = 异步 JavaScript 和 xml
ajax 是一种应用于快速创建动态网页的技术，通过在后台与服务器少量的数据交换，Ajax可以使网页实现异步更新，（在无需刷新整个页面的情况下进行网页部分更新）

XMLHttpRequest

是 AJAX 的基础。 (简称XHR)
XMLHttpRequest 用于在后台与服务器交换数据。所有的现代浏览器都支持XMLHttpRequest 对象（IE5,6使用ActiveXObject）

创建XHR对象

`variable=new XMLHttpRequest();`

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象
variable=new ActiveXObject("Microsoft.XMLHTTP");
所以，为了兼容所有现代浏览器，可以封装

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");
  }

向服务器发送请求

再次声明XMLHttpRequest对象用于和服务器交换数据
如需将请求发送到服务器，使用XHR对象的 open（）和 send（）方法
例：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

方法：
open(method, url , async)

三个参数分别为

(method)规定请求的类型，post 或 get
(url) 路径（文件在服务器上的位置）
该文件可以是任何类型的文件，比如.txt和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。
（async）true（异步）或 false(同步)
XHR如果要用于AJAX open 方法的async参数必须是true;

send(string)
将请求发送到服务器。
string：仅用于 POST 请求

get和post
与post相比 get 更简便也更快，且大多数时候都能使用，在以下情况必须使用Post

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

有关于get 和 post的示例
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定发送的数据：

方法： setRequestHeader(header ,value)
给请求加上HTTP头

服务器响应

XHR对象的两个属性

responseText 获得字符串形式的响应数据
responseXML 获得 XML 形式的响应数据。

如果来自服务器的响应不是xml，都是用responseText 属性
两种属性示例

AJAX-onreadystatechange事件

当请求被发送到服务器时，就需要执行一些基于响应的任务
每当 readyState 改变，就会触发onreadystatechange 事件，
而readytState 的属性存有XMLHttpRequest 的状态信息.

onreadyState :存有XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
onreadystatechange: 存储函数，每当readystate 改变时就会调用该函数。
status （HTTP状态码）
200： ok;
404: 未找到页面
503：服务器暂时不可用
onreadyststechange 规定了在服务器响应已做好被处理准备时所执行的任务，readyState = 4,且status = 200时，响应已经就绪。

来源：CSDN

作者：实心爆米花

链接：https://blog.csdn.net/q1378465762/article/details/81583435

标签

ajax

服务器类型

xmlhttp

Ajax基础