Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

  AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

  AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。AJAX可以更新部分页面,而不需要整个刷新,从而提升用户体验。

  XMLHttpRequest 对象

  是Ajax的核心,所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

  XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

  创建方法:

  var xhr = new XMLHttpRequest();

  常用方法:

  open("GET/POST","URL地址",true/false) 打开连接

  true和false代表异步或同步。

  同步表示需要等待服务器响应后才能执行后面的代码

  异步表示不需要等待服务器响应,响应后会进行通知

  推荐使用异步方式。

  send(String) 发送请求

  如果是POST方法需要填写请求参数,如:"name=zhang&age=20"

  如果是Get方法参数可以不写

  onreadystatechange事件回调,监听连接状态改变

  用法:

  onreadystatechange = function(){...};

  常用属性:

  readyState 连接状态

  ajax共有5种状态:

状态

名称

描述

0

Uninitialized

初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。

1

Open

open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。

2

Sent

Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。

3

Receiving

所有响应头部都已经接收到。响应体开始接收但未完成。

4

Loaded

HTTP 响应已经完全接收。

  responseText 服务器响应文本内容

  status 响应码、如:200、404、500等

  案例:使用ajax和Servlet进行交互

 

 

 

  JQuery中的Ajax函数:

  除了原生的Ajax代码外,JQuery框架也封装了几个ajax函数,让我们能更容易地与服务器交互。

  $.ajax

  常用参数:

  type 请求方法GET、POST

  url 服务器地址(必须)

  data 请求参数

  async 是否异步true,false

  success 正常情况调用函数

  error 错误情况调用函数

  示例:

  $.ajax({url:check.do,data:{tel:‘13001112222’},async:true,

  success:function(data){

  alert(服务器返回内容+data);

  },

  error:function(){

  alert(服务器操作出现错误);

  }

  });

  $.post函数

  以post方式和服务器交互

  $.post("URL地址",{参数名:值},function(data){

  回调代码

  });

  案例:

  //使用jquery的post方法

  function post(){

  $.post("ajax.do",{name:李四},function(data){

  $("#div1").text(data);

  });

  }

  $.get 函数

  以get方式和服务器交互

  $.get("URL地址?参数",function(data){

  回调代码

  });

  案例:

  //使用jquery的get方法

  function get(){

  $.get("ajax.do?name=赵六",function(data){

  $("#div1").text(data);

  });

  }

  load函数

  使用load方法,将ajax加载的内容直接插入到标签中

  案例:

  $(function(){

  $("#div1").click(function(){

  //post();

  //get();

  $("#div1").load("ajax.do?name=马九");

  });

  });

  应用场景:

  用户注册时检查用户名是否存在

  需求:用户注册时,填写手机号后,当输入框失去焦点时,对手机号进行服务器验证后在手机号输入框后面显示”用户名已存在"或"用户名可以使用";

  思路:

  1、在input的onblur事件中进行验证

  2、通过ajax发送手机号给后台Servlet

  3、Servlet对手机号进行数据库查询,返回是否存在的文字给ajax

  4、ajax收到返回文字后,显示到标签上

  总结:Ajax能够让浏览器和服务器进行交互,并且在不刷新页面的情况下对网页内容进行更新,大大提高了用户体验,通过Ajax技术能够构建交互性极强的Web应用程序。

  千锋​​成都Java培训​​课程的授课模式采用全程面授,讲师成本虽高,但是效果却是显著的,和学员面对面沟通,了解到学员在学习过程中遇到的问题,动态地调整授课方式。及时有效地帮助学员解决疑难问题,提高学员的学习积极性。千锋java视频教程为零基础的学员提供高品质的学习资料,让每一个热爱编程的学员可以掌握扎实的基础。