Ajax学习笔记

1 什么是Ajax

1.1 概念

Ajax(Asynchronous Javascript And XML)(异步的 JavaScript 和 XML)是一种借助客户端脚本语言(JavaScript)快速创建动态页面的Web应用技术。其本质是请求服务端的少量数据,从而达到快速更新页面的,即异步请求,局部刷新其核心是Ajax引擎

2 技术出现背景

每一个新技术的出现,都是在解决和优化在业务上的痛点和效率问题,而Ajax技术的出现解决了在客户端不能异步请求的问题。
Ajax引擎可以把Ajax看成是一个线程池,存储的是线程资源,当你需要请求服务器端的数据的时候,在传统的情况下是执行同步操作(只有一个线程),即发出一个请求之后,你之能等着服务器的响应,在Ajax方式下可以发出多个请求,因为其余的线程会由Ajax引擎创建,使得请求异步进行,不能进行跨域访问,但是现在也出现了支持跨域访问的技术。

2.1 传统的方式服务器做出响应的原理

Ajax学习笔记_第1张图片

2.2 Ajax方式服务器做出响应的原理

Ajax学习笔记_第2张图片

3 Ajax入门

3.1 请求响应原理

Ajax请求会基于DOM(HTML元素)事件,XHR(XMLHttpRequest)对象,实现与服务端的异步请求局部刷新。
Ajax学习笔记_第3张图片

3.2 请求步骤

1.创建XHR对象
2.注册XHR对象监听,通过回调函数处理状态信息
3.建立与服务端的连接
4.发送异步请求实现与服务端的通信
5.通过回调函数获得结果信息并且做出响应

3.3 通过Google浏览器编写Ajax案例

function ajaxDemo(url,params,callback){
    var xhr=new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            callback(xhr.responseText);
        }
    }
     xhr.open("GET",url+"?"+params,true);
     xhr.send(null);
}

Ajax学习笔记_第4张图片

你可能感兴趣的:(javascript,web)