初识AJAX

一、概念

AJAX:Asynchronous（异步的） JavaScript and XML  —  异步JavaScript和XML

 一种创建交互式网页应用的网页开发技术，不是一种单一的技术，而是有机地利用了一系列相关的技术，简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端的集合。

相关技术表：

web标准( Standards-Based Presentation )XHTML+CSS的表示,

使用 DOM( Document Object Model )进行动态显示及交互,

使用 XML 和 XSLT 进行数据交换及相关操作,

使用 XMLHttpRequest 进行异步数据查询、检索.

 

二.优点—局部异步刷新

我们先了解一下什么是同步，什么是异步？

同步：一个时间段只能做一件事情，超级浪费时间

同步访问	在访问服务器时，客户端只能等待服务器的响应，不能做其它事情。用户体验非常的差
适用场景	1、输入网址访问页面  2、a标记的默认跳转  3、submit按钮的表单提交

 

异步：一个时间段可以同时做多件事情，体验好

异步访问	在向服务器发送请求时，不耽误用户在网页上做其它的操作
代表场合	1、用户名的重复性验证 2、聊天室 3、股票走势图  4、搜索建议(百度，京东，淘宝 的搜索框)

       

  普通网页请求回执过程，用户发送请求后，只能默默等待服务器回应。——同步

 用户端发送请求后，不需要等服务器响应，可继续做其他的事情。——异步

AJAX的优点有哪些？

1.无刷新，用户体验好

2.使用XMLHttpRequest 本身传送的数据量很小（服务器响应回来的是部分数据，不是完整的页面），所以反应会更快，也就让网络程式更像一个桌面应用程序

3.内部进行浏览器与服务器的数据交换，很多与服务器之间的沟通，完全是透过Javascript 来实行

4.很多动作都是Javascript 来实行,省去了网页重载的弊端

三、XHR 的常用属性 和 方法(难点)

open() 方法：用来创建请求

语法：open(method,url,isAsyn)

语法解析： 1、method                     string 类型                     请求方式 ：get,post,... ... 2、url                     string 类型                     请求地址 3、isAsyn                     boolean 类型                     指定采用同步(false)还是异步(true)的方式发送请求

readyState - 属性：表示 xhr 对象的 请求状态

由 0 - 4 表示 5个状态  0 : 请求尚未初始化                                                                1 : 已经打开到WEB服务器的连接，正在向服务器发送请求  2 : 请求完成  3 : 正在接收服务器端的响应  4 : 接收响应数据成功

注意：当 readyState的值为4的时候，表示所有的响应都已经接收完毕。

status - 属性：服务器的响应状态码

当 status 的值是 200的时候，表示服务器已经正确的给出所有的响应

onreadystatechange - 事件

作用

当 xhr 的readyState 属性值发生改变的时候，要自动激发的操作

语法

xhr.onreadystatechange = function(){           //每当xhr.readyState的值，发生变化时，要执行的操作。           //判断 xhr.readyState为4的时候 并且 xhr.status 为 200的时候，才能获取正常的响应数据                         if(xhr.readyState == 4 && xhr.status == 200){                         //可以接收响应回来的数据                          //responseText 属性，表示服务器响应回来的文本                         var resText=xhr.responseText;                     }                 }

send() - 方法：发送\提交请求

语法：send(body);   body : 是请求主体   没有请求主体的提交方式，body位置处，要写 null   有请求主体的提交方式，body位置处，编写的就是请求主体的数据

四、原生js发送异步请求的步骤（了解）

  允许通过 window.XMLHttpRequest 判断浏览器是否支持 XMLHttpRequest()。如果 window.XMLHttpRequest的值是null的话，说明需要通过 ActiveXObject()创建，否则需要通过 XMLHttpRequest() 来创建

//1.创建核心对象
	            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. 建立连接
	            /*
	                参数：
	                    1. 请求方式：GET、POST
	                        * get方式，请求参数在URL后边拼接。send方法为空参
	                        * post方式，请求参数在send方法中定义
	                    2. 请求的URL：
	                    3. 同步或异步请求：true（异步）或 false（同步）
	
	             */
	            xmlhttp.open("GET","ajaxServlet?username=tom",true);
	
	            
//3.发送请求  get 请求没有请求主体，所以为xhr.send(null)
	            xmlhttp.send();
	
	            
//4.接受并处理来自服务器的响应结果
	            //获取方式 ：xmlhttp.responseText
	            //什么时候获取？当服务器响应成功后再获取
	
	            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
	            xmlhttp.onreadystatechange=function()
	            {
	                //判断readyState就绪状态是否为4，判断status响应状态码是否为200
	                if (xmlhttp.readyState==4 && xmlhttp.status==200)
	                {
	                   //获取服务器的响应结果
	                    var responseText = xmlhttp.responseText;
	                    alert(responseText);
	                }
	            }

使用 POST 方式发送请求
    1、提交的请求数据
        提交的请求数据需要按照指定的格式拼好，放在 send() 中传递
        xhr.send("name1=value1 & name2=value2");
    2、设置一个请求消息头
        POST 提交方式，必须将 Content-Type 的请求消息头更改为 application/x-www-form-urlencoded

        在发送请求之前：
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

例子如下：

五、JQuery实现方式

1. $.ajax()
			* 语法：$.ajax({键值对});
			 //使用$.ajax()发送异步请求
	            $.ajax({
	                url:"ajaxServlet1111" , // 请求路径
	                type:"POST" , //请求方式
	                //data: "username=jack&age=23",//请求参数
	                data:{"username":"jack","age":23},
	                success:function (data) {
	                    alert(data);
	                },//响应成功后的回调函数
	                error:function () {
	                    alert("出错啦...")
	                },//表示如果请求响应出现错误，会执行的回调函数
	
	                dataType:"text"//设置接受到的响应数据的格式
	            });

2. $.get()：发送get请求
			* 语法：$.get(url, [data], [callback], [type])
				* 参数：
					* url：请求路径
					* data：请求参数
					* callback：回调函数
					* type：响应结果的类型


3. $.post()：发送post请求
			* 语法：$.post(url, [data], [callback], [type])
				* 参数：
					* url：请求路径
					* data：请求参数
					* callback：回调函数
					* type：响应结果的类型

六.Ajax实例

 Ajax 用户注册检查，我们注册网页注册的时候，通常输入一个用户名，然后系统会自动检测该用户名是否已经注册。其实这里就用到了Ajax.

通常注册时，所有信息都输入完后，点击注册按钮，然后才会判断你的用户名是否已经注册，当注册后，页面会被刷新，其他信息都将消失，用户体验极差，而且时间特别长

Ajax 注册时，当输入完用户名以后，会自动发送一个Post请求，验证用户名是否已经注册，并实时的通知用户,效果好。

Demo:

当用户名失去焦点事件时，自动发送一个Post请求，去检验该用户是否已经注册。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="WebAJAX.Register" %>





    
    
    
    


    

        

            用户名:

            密码:

            
        
    

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using BLL;
namespace WebAJAX
{
    /// 

    /// CheckUserName 的摘要说明
    /// 
    public class CheckUserName : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string userName = context.Request["name"];
            userInfoBLL  user  = new  userInfoBLL();
            if (user.GetUserInfo(userName) != null)
            {
                context.Response.Write("此用户名已存在!!");
            }
            else
            {
                context.Response.Write("此用户名可用!!");
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

效果展示：

后面将会持续分享一些AJAX的学习，大家记得看哦！