什么是 ajax
1.ajax（阿贾克斯 Asynchronous JavaScirpt And Xml）异步JavaScirpt 和 XML，是指一种创建交互式网页应用的网页开发技术，可以访问服务器数据的局部刷新的技术。
2.ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的web应用程序的技术。
ajax的作用是什么
允许客户端脚本发送HTTP请求，去请求服务器的数据来创建动态网页，可以在不重新加载整个网页（刷新网页）的情况下，对网页的某部分进行更新。也称为局部刷新。
常见例子： 分页、用户名即时验证（在输入的同时验证）、聊天室...
同步和异步
异步：完成一件事情的同时做别的事情，可以同时完成多件事情，互不影响；
同步：就是异步的反面，死等前面的执行结束，才执行下面的事情；
XML 传输数据的格式
例：
<student>
<name> loye </name>
<age> 22 </age>
</student>
【注】XML 和HTML很像，唯一不同的就是标签可以自定义，也是表达语义的，但是不用被浏览器呈递，就是负责交换信息的，现在已经被JSON替代，因为XML后台难以生成，前台难以解析。XML 没有数组，并且长，要有标签的封闭。
JSON 传输数据的格式
JSON（JavaScript Obiect Notation）是一种轻量级的数据交换格式。通过JavaScript 中的一些模式来表示结构化数据；
JSON 的语法可以表示三种类型的值：
1. 对象表示法（JSON 中对象表示法必需要加上双引号，并且不存在赋值运算和分号）：
{
"name": "loye", // 必须加双引号，否则转换会出错（单引号也不行）
"age": 22, // 数字可以不加引号
}
2. 数组表示法（同样没有赋值和分号）：
["loye","22","true"]
3. 对象和数组结合的表示法（最常用的方法）：
⑴.数组里面加对象：
[
{
"name": "loye",
"age": 22,
},
{
"name": "落叶",
"age": 22,
}
]
⑵.对象里面加数组：
{
"age": 22,
"name": ["loye","落叶"]，
}
JSON 解析
JSON解析 就是对JSON格式的字符串解析成原生的JavaScript值（数组或对象）。
- eval语句：能够识别字符串，并把字符串当做JS语句执行；
var a = "alert(1+3+4)";
eval(a); // 弹出 结果为8的警告框
- 在ajax中，data 是一个 string，可以用eval转化为JSON，需要注意的是，JSON先通过圆括号的拼接，变为表达式；
var json = eval( "(" + data + ")" );
console.log(json);
// data 可以为请求服务器获取的数据，但eval这个方法可能会造成安全问题；
JSON 对象提供了另外两个方法（常用）：
1. JSON.parse():
JSON 解析，将JSON字符串转换为JavaScript原生值（对象或者数组）；
2. JSON.stringify():
json 序列化，将原生JavaScript值（对象或者数组）转换为JSON 字符串的过程；
JSON 文本形式，并且赋值给变量box。box的值是标准的JSON格式写法（注意单双引号，将单引号写在外面，里面用双引号）
var box = '[{"name": "loye","age":22},{"name": "落叶","age":22}]'；
XMLHttpRequest
ajax 的核心是 JavaScript对象XMLHttpRequest。它是一种支持异步请求数据的技术（简称XHR）
XHR 的出现，提供了向服务器发送请求和解析服务器响应流畅的接口。能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，更新服务器最新的数据。（XHR 支持IE7+、Firefox、Opera、Chrome和Safari等浏览器，但是不支持IE6）
IE7+、Firefox、OPera、Chrome和Safari等浏览器创建XHR：
// 创建XHR 对象可以直接实例化 XMLHttpRequest
var xhr = new XMLHttpRequest();
alert(xhr); // XMLHttpRequest
IE6 及以下，创建xhr
// 需要使用ActiveX 对象通过传入参数 Microsoft.XMLHTTP 来实现。
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
能力检测：
// 判断浏览器是否支持 XMLHttpRequest
if(window.XMLHttpRequest){
// 支持创建xhr
var xhr = new XMLHttpRequest;
}
else if(window.ActiveXObiect){
var xhr = new ActiveXObiect("Microsoft.XMLHTTP");
}
open()方法：
他接受三个参数：
1. 要发送的请求类型（get、post）
2. 请求的URL
3. 表示是否异步（true 表示异步、false 表示同步）；
xhr.open("GET/POST",url,true);
send()方法：
向浏览器发送请求open() 方法并不会真正的发送请求，而是准备好需要发送给服务器的内容。我们需要通过send() 方法向服务器发送请求。
send() 方法接受一个参数，作为请求体发送的数据。
如果适合get方式请求则填null。
xhr.send(null);
abort() 方法：
取消异步请求，如果需要取消异步请求，则在send()之后在调用，写在send()之前调用会报错。
xhr.abort(); // 取消异步请求
XHR 对象的属性：
当请求发送到服务器端，收到响应后，响应的数据会自动填充XHR 对象的属性，一共有四个属性
status：响应的 HTTP 状态；
一般Http 状态码为 200 则表示请求服务器成功；
statusText：HTTP 状态的说明；
responseText：作为响应主体被返回的文本；
responseXML：如果响应主体内容类型是"text/xml"或"application/xml",
则返回包含响应数据的XML文档，否则是null
readyState 属性：
0： 没有发送（open()还没有被调用）；
1： 已经发送了，但服务器还没有接收到（调用send()）；
2： 服务器已经接收到了，但还没有处理完数据；
3： 服务器已经处理完数据，并且已经返回；
4： 客户端已经正常接收到服务器返回的数据；
特殊符号转码：
因为get方式是通过地址栏发送数据的，中文和特殊符号很容易出现乱码状况，先编码在转码之后不会出现乱码情况：
1. encodeURIComponent 编码
var str = "你好"；
var r = encodeURIComponent(str);
console.log(r); // 编码结果: %E4%BD%A0%E5%A5%BD
2. decodeURIComponent 转码
var str = "%E4%BD%A0%E5%A5%BD";
var r = decodeURIComponent(str);
console.log(r); // 转码结果：你好
将自己的电脑变成服务器的方法：
apache、IIS、Nginx、Jboss、nodeJS . . .
nodejs 启动服务器的方法：
1. 进入服务器目录（例：server.js）；
2. shift+ 鼠标右键，选择“在当前目录打开命令窗口”
3. 输入"node server.js" 回车启动；
同步请求数据：
// 浏览器向服务器请求数据（同步请求）
// 1. 创建对象
var xhr = new XMLHttpRequest();
// 2. 调用此对象中准备方法
open("GET","http://localhost:8080/ajax/ajaxtest",false);
// 3. 发送（同步请求，send执行完readyState 就已经 为 4了）
send();
// 4. 获取数据（服务器向浏览器返回一个数据(以字符串的形式传递回来)）
var str = xhr.responseText;
console.log(str); // 返回的数据
异步请求数据：
// 1. 创建对象
var xhr = new XMLHttpRequest();
// 2. 准备
open("GET","http://localhost:8080/ajax/ajaxtest",true);
// 3. 发送
send();
//4. 获取数据
xhr.onreadystatechange = function(){
// 判断状态是否正确
if(xhr.readyState == 4 && xhr.status == 200){
var str = xhr.responseText;
console.log(str);
}
}
网友评论