Ajax基础知识

Ajax简介

1. Ajax（Asynchronous JavaScript and XML）= 异步JavaScrip和XML,用于创建快速动态网页的技术，可以使网页实现异步更新，不用重新加载整个页面的情况下，对网页的局部更新。
   
2. Ajax基于现有的Internet标准，并且联合使用以下几种语言：
   
   ①：XMLHttpRequest对象(异步的与服务器交换数据)
   
   ②：JavaScript/DOM(信息显示/交互)
   
   ③：CSS(给数据定义样式)
   
   ④：XML(作为转换数据的格式)

   Ajax创建XMLHttp对象

3. 创建XMLHttpRequest对象：
   

variable = new XMLHttpRequest();
variable = new ActiveObject("Microsoft.XMLHTTP");  <!--老版本的Intenet Explorer-->

【注】首先检查是否存在“XMLHttpRequest”，代码如下：

if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
}else{
    xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
}

向服务器发送请求

1. XMLHttpRequest对象用于和服务器交换数据，所以如果需要请求发送到服务器，则使用该对象中的open()和send()方法。当open中第三个参数为false时，不可以编写onreadystatechange函数，只需要把代码放到send()语句后即可。若第三个参数为true，则需要规定在响应处于onreadystatechange事件中的就绪状态时执行函数，

<!-- 当第三个参数为true时执行onreadystatechange-->
xmlhttp.onreadystatechange=function()
{
    <!--当readState等于4且状态为200时表示响应已经就绪-->
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("GET","info.txt",true);<!-- 第一个参数表示请求的类型，即GET或PSOT，第二个参数表示文件在服务器上的位置，第三个参数表示同步或一异步，即true表示异步，false表示同步-->
xmlhttp.send(); <!-- 只使用post请求-->

1. 在open方法中，但使用GET方法请求时，读取的文件有可能是缓存中的结果，所以为了避免这种情况，一般会在URL上加一个唯一的ID，如果需要发送信息，也在URL上添加信息。当使用POST方法时，可用setRequestHeader()来添加HTTP头，然后在send方法中添加需要发送的数据。
   【注】在方法setRequestHeader(header，value)中有链各个参数，第一个是规定头的名称，第二个是规定头的值

Ajax服务器响应

1. XMLHttpRequest对象中的responseText 和responseXML 属性:
   
   ①：responseText：获得字符串形式的响应数据；
   
   ②：responseXML：获得XML形式的响应数据。
2. 如果服务器的响应是 responseXML，则需要作为XML对象解析，如下代码：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

onreadystatechange 事件

1. 当请求被发送到服务器端的时候，需要执行一些基于响应的任务，每当readyState改变时，就会触发该事件，readyState属性存有XMLHttpRequest的状态信息。readyState状态从0到4的变化如下：
   
   ①：0：请求未初始化；
   
   ②：1：服务器连接已建立；
   
   ③：2：请求已接收;
   
   ④：3：请求处理中；
   
   ⑤：4：请求已完成，且响应已就绪。
   
   status的状态：
   
   ①：200：“ok”；
   
   ②：404：未找到页面。

基础知识铺垫

1. 客户端与服务器概述
   • 客户端主流操作系统：windows、mac、Linux
   • 服务端操作系统：Linux、unix
   • 客户端应用：qq、播放器、浏览器
   • 服务端应用：网页服务（Apache、Nginx、tomcate（java）、iis（微软））、邮件服务（posfix）、文件上传下载服务（vsftp）

2. 计算机通信协议
   计算机组成： cpu（运算器和控制器）、存储器（硬盘、内存）、输入、输出设备
   计算机运行机制：输入设备将数据发到cpu，cpu将数据传输到存储器（必须经过内存去访问硬盘），存储器传到输出设备（开机时所有数据会存储在存储器中）
   注意： 内存：程序一开始是在磁盘上，要想运行必须首先加载在内存

   网络相关概念

   • IP地址：xxx.xxx.xxx.xxx
   • 端口：用来区分电脑上的特定应用网络程序
   • 域名：IP的别名（可以买卖）
   • 域名和IP地址：对应关系不一定是一对一的
   • 访问 http://www.baidu.com时：
     1.域名解析
     2.通过解析道德IP地址找到对应的计算机
   • DNS
3. 配置网站服务器
4. 前端和后端的角色分工
   • B/S:brower 浏览器，server 服务器
   • C/S：clienc 客户端（qq），server 服务器 如果一个功能有改进，所有使用的人都需要更新

5. 同步和异步

   • 同步：阻塞（白屏，整个页面刷新）
   • 异步：（页面不全部刷新，局部刷新）
   • 浏览网页的时候两种情况：
     1.白屏（同步）；
     2.页面不刷新（异步） 局部更新页面不会全屏刷新

   • 实现异步局部更新（不使用XMLHttpRequest对象）

   • 

6. 原生ajax实现异步通信

赏

谢谢你请我吃糖果