关闭

Ajax总结

556人阅读 评论(0) 收藏 举报
分类:

目  录


一、 Ajax概述 1

1.1什么是Ajax 1

1.2 Ajax对象:如何获得Ajax对象 1

1.3 Ajax对象的属性 2

1.4编程步骤 2

1.5编码问题 3

1.6 Ajax的优点 3

1.7缓存问题(IE浏览器) 4

1.8案例:简易注册(使用Ajax进行相关验证,get请求) 4

1.9案例:修改1.8案例,使用post请求 6

1.10案例:使用Ajax实现下拉列表 6

二、 JSON 7

2.1 什么是JSON 7

2.2数据交换 7

2.3轻量级 7

2.4 JSON语法(www.json.org) 7

2.5如何使用JSON来编写Ajax应用程序 8

2.6案例:股票的实时行情 9

2.7案例:显示热卖的前3个商品 10

2.8同步请求 10

2.9案例:修改1.8案例step1中的JS代码(使用同步请求) 11



一、Ajax概述

1.1什么是Ajax

Asynchronous Javascript And Xml(异步的JavaScript和Xml)。是一种用来改善用户体验的技术,其实质是利用浏览器内置的一个特殊对象(XMLHttpRequest,一般称之为Ajax对象)异步地(Ajax对象在向服务器发送请求时,浏览器并不会销毁当前页面,用户仍然可以对当前页面作其他的操作)向服务器发送请求,服务器送回部分数据(不是一个完整的新的页面,而是文本或者Xml文档),在浏览器端,可以利用这些数据部分更新当前页面。整个过程,页面无刷新,不打断用户的操作。

之前,都是先销毁原来的页面,然后发送请求,等待服务器发送响应,再生成新页面。

Ajax的工作流程:

1.2 Ajax对象:如何获得Ajax对象

由于XMLHttpRequest(Ajax对象)没有标准化,所以要区分浏览器。

function getXhr(){//注意:后面的案例都将用到此函数

var xhr=null;

if(window.XMLHttpRequest){

xhr=new XMLHttpRequest();//非IE浏览器

}else{

xhr=new ActiveXObject('Microsoft.XMLHttp');//IE浏览器

}

return xhr;

}

u 注意事项:后面的案例也会用到以下函数

function $(id){//依据id返回dom节点

return document.getElementById(id);

}

function $F(id){//返回id对应的值

return $(id).value;

}

1.3 Ajax对象的属性

1)onreadystatechange:绑定一个事件处理函数(监听器),该函数用来处理readystatechange事件。Ajax对象的readyState属性发生改变,比如从0到1,则会产生onreadystatechange事件。

2)responseText:获得服务器返回的文本数据。

3)responseXML:获得服务器返回的Xml文档。

4)status:获得状态码。

5)readyState:返回Ajax对象与服务器通讯的状态,返回值是一个number类型的值。一共有5个值,分别是:

①0:(未初始化)对象已建立,但是尚未初始化(尚未调用open方法)。

②1:(初始化)对象已建立,尚未调用send方法。

③2:(发送数据)send方法已调用。

④3:(数据传送中)已接收部分数据。

⑤4:(响应结束)Ajax对象已经获得了服务器返回的所有的数据。

1.4编程步骤

1)发送get请求:

step1:获得Ajax对象,比如:var xhr=getXhr();//调用之前定义的函数

step2:使用Ajax对象发送get请求

①调用xhr.open('get',check_username.do?username=chang&age=23,true);方法:建立与服务器之间的连接,三个参数依次为:请求方式、请求资源路径、请求是同步还是异步。

true:表示异步请求(Ajax对象发送请求时,用户可以对当前页面作其他的操作,不会销毁页面)。

false:表示同步请求(Ajax对象发送请求时,浏览器会锁定当前页面,用户只能等待,不会销毁页面)。

②xhr.onreadystatechange=func1();:绑定一个事件处理函数(监听器)

③xhr.send(null);:发送请求参数,因为参数已经写在了请求资源路径中,所以这里为null。

step3:编写服务器端的处理程序,跟以前相比,有一点点改变,就是一般不需要返回一个完整的页面,只需要返回部分的数据。

step4:编写事件处理函数

  function f1(){

if(xhr.readyState==4){

var txt=xhr.responseText;

dom操作……

}

  }

2)发送post请求:

step1:获得Ajax对象,比如:var xhr=getXhr();//调用之前定义的函数

step2:使用Ajax对象发送post请求

①xhr('post','check_username.do',true);:建立连接

②xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');:发送一个content-type消息头

③xhr.onreadystatechange=func1();:绑定一个事件处理函数(监听器)

④xhr.send('username=chang');:发送请求参数

u 注意事项:

v 与get请求不同,请求参数要放到send方法里面。

v 因为按照HTTP协议的要求,发送post请求时,应该发送一个content-type消息头,而Ajax对象在默认情况下,不会发送这个消息头,所以,需要调用setRequestHeader方法来添加。

step3:编写服务器端的处理程序,跟以前相比,有一点点改变,就是一般不需要返回一个完整的页面,只需要返回部分的数据。

step4:编写事件处理函数

1.5编码问题

1)发get请求

①乱码产生的原因:

IE浏览器内置的Ajax对象会使用“GBK"或"GB2312“对中文参数进行编码,而其他浏览器(Chrom、Firefox)内置的Ajax对象会使用“utf-8”对中文参数进行编码。服务器端,默认会使用“ISO-8859-1”去解码。因为编码与解码所使用的字符集(编码格式)不一致,所以,会出现乱码问题。

②解决:

step1:设置服务器使用指定的字符集去解码。比如,可以修改Tomcat的server.xml配置(conf文件夹中),添加URIEncoding="utf-8"(告诉服务器,对于所有的get请求,默认使用“utf-8”去解码),修改之后重新启动服务器。

    <Connector port="8080" maxHttpHeaderSize="8192"

         maxThreads="150" minSpareThreads="25" maxSpareThreads="75"

         enableLookups="false" redirectPort="8443" acceptCount="100"

     connectionTimeout="20000" disableUploadTimeout="true" URIEncoding="utf-8" />

step2:使用encodeURI()函数(JS中内置函数)对请求地址进行编码。encodeURI()函数会使用“utf-8”进行编码

  xhr.open('get','check_username.do?username='+$F('username'),true);

  var uir='check_username.do?username='+$F('username');

  xhr.open('get',encodeURI(uri),true);

2)发post请求

①乱码问题产生的原因:

所有浏览器(一般指三大浏览器:Chrom、Firefox、IE)内置的Ajax对象都会使用“utf-8”对中文参数进行编码,而服务器默认情况下,会使用“ISO-8859-1”去解码。

u 注意事项:Firefox特殊,本应是乱码,但能正常显示。通过截取消息头发现Firefox会在消息头中自动添加"charset=utf-8"。

②解决:

服务器端添加:request.setCharacterEncoding("utf-8");

1.6 Ajax的优点

1)页面无刷新,不打断用户的操作。

2)按需要获取数据,客户端(浏览器)与服务器端之间的数据传输量大大减少。

3)是一种标准化的技术,不需要下载任何插件。

1.7缓存问题(IE浏览器)

1)当发送get请求时

IE浏览器(其他浏览器没这个问题)内置的Ajax对象会检查请求地址是否访问过,如果访问过,则不再向服务器发送请求。

2)解决方式

方式一:在请求地址后面添加一个随机数,用于欺骗IE,例如:

    xhr.open('get','getNumber.do?'+Math.random(),true);

方式二:使用post方式发请求。

3)案例:在IE浏览器中测试缓存问题

step1:getNumber.jsp页面

<a href="javascript:;" onclick="getNumber();">点这儿,在链接底下显示一个随机数</a>

<div id="d1"></div>

step2:JS代码getNumber函数

function getNumber(){

var xhr=getXhr();

xhr.open('get','getNumber.do?'+Math.random(),true);//若没随机数,则点链接不会变化

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

var txt=xhr.responseText;

$('d1').innerHTML=txt; } };

xhr.send(null); }

step3:Servlet中service方法中的if判断

if(action.equals("/getNumber")){

Random r=new Random();

int number=r.nextInt(10000);

System.out.println(number);

out.println(number); }

1.8案例:简易注册(使用Ajax进行相关验证,get请求)

step1:编写myScript.js并放在js文件夹中

此处省略三个函数,详看1.2

function check_username(){//检查用户名,get请求

var xhr=getXhr();//step1获得Ajax对象

//step2使用Ajax对象发送请求

xhr.open('get','check_username.do?username='+$F('username'),true);

   //绑定一个事件处理函数,里面的代码在状态改变时执行,且状态为4时执行if语句

xhr.onreadystatechange=function(){

   if(xhr.readyState==4){

   if(xhr.status==200){//服务器返回了正确的结果

 //只有readyState为4时,Ajax对象才获得服务器返回的所有数据

 var txt=xhr.responseText;

 $('username_msg').innerHTML=txt;//利用服务器返回的数据更新页面

   }else{//服务器运行出错

$('username_msg').innerHTML='验证出错'; } }

};

$('username_msg').innerHTML='正在验证...';//模拟用户量较大的情况,显示正在验证

xhr.send(null); }

function check_number(){//检查验证码

var xhr=getXhr();

xhr.open('get','check_number.do?number='+$F('number'),true);

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

var txt=xhr.responseText;

$('number_msg').innerHTML=txt; } };

xhr.send(null); }

step2:编写regist.jsp页面,get请求

<form action="regist.do" method="get">

  <fieldset>

  <legend>注册</legend>

  用户名:<input type="text" name="username" id="username"

onblur="check_username();"/>

  <span class="tips" id="username_msg"></span><br/>

  真实姓名:<input type="text" name="name"  /><br/>

  验证码:<input type="text" name="number" id="number"

onblur="check_number();" />

  <img src="checkcode" id="img1" onclick="this.src='checkcode?'+Math.random();" />

  <a href="javascript:;" onclick="$('img1').src='checkcode?'+Math.random();">

看不清换一个</a>

  <span class="tips" id="number_msg"></span><br/>

  <input type="submit" value="提交" />

  </fieldset>

</form>

u 注意事项:href="javascript:;"相当于href="#",写成href="javascript:;"一般要和onclick事件一起使用,表示a元素不再指向一个地址,而是点击后触发一个事件。

step3:ActionServlet中service方法

response.setContentType("text/html;charset=utf-8");

PrintWriter out = response.getWriter();

String uri = request.getRequestURI();

String action = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));

if(action.equals("/check_username")) {

String username=request.getParameter("username");

//    try {//模拟耗时操作

//   Thread.sleep(6000); } catch (InterruptedException e) { e.printStackTrace();  }

if(1==1){//模拟一个系统异常

throw new ServletException("some error"); }

if(username.equals("常")){

out.println("已被占用");   }else{   out.println("可以使用");  }

 }else if(action.equals("/check_number")) {

String number1=request.getParameter("number");

HttpSession session=request.getSession();

String number2=(String)session.getAttribute("number");

if(number1.equalsIgnoreCase(number2)){ out.println("验证码正确");

}else{ out.println("验证码错误"); }

}else if(action.equals("/regist")){

//加上验证代码,比如检查用户名是否正确,验证码是否正确,此处略

System.out.println("注册成功"); }

step4:CheckcodeServlet借用之前Servlet笔记中13.20案例,随机生成验证码

1.9案例:修改1.8案例,使用post请求

step1:修改regist.jsp页面请求方式为post

step2:添加JS验证代码check_username_post

function check_username_post(){

var xhr=getXhr();

xhr.open('post','check_username.do',true);

//添加一个消息头

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

var txt=xhr.responseText;

$('username_msg').innerHTML=txt; } };

xhr.send('username='+$F('username')); }

1.10案例:使用Ajax实现下拉列表

step1:ActionServlet中service方法中的if判断

if(action.equals("/select")){

        String name = request.getParameter("name");

        if(name.equals("qq")){  out.println("性价比高");

        }else if(name.equals("bmw")){ out.println("驾驶性能出众");

        }else{ out.println("好车,也贵"); } }

step2:select.jsp页面

<select id="s1" onchange="change(this.value);">

<option value="qq">QQ</option> <option value="bmw">宝马</option>

<option value="ff">法拉利</option></select>

<div id="d1"></div>

step3:JavaScript代码

function change(value){

var xhr=getXhr(); xhr.open('get','select.do?name='+value,true);

xhr.onreadystatechange=function(){

if(xhr.readyState==4){ var txt=xhr.responseText;  $('d1').innerHTML=txt; }

};

xhr.send(null); }

二、JSON

2.1 什么是JSON

JavaScript Object Natation,是一种轻量级的数据交换技术规范(因为借鉴了JavaScript对象创建的一种语法结构,故命名为JSON,详情见JavaScript第8章)。

2.2数据交换

将数据转换成一种中间的,与平台无关的数据格式(比如Xml或者JSON字符串)发送给另外一方来处理。

2.3轻量级

JSON相对于Xml,所需的数据大小要小的多,并且解析的速度更快。因此Xml现在用的少了(Ajax中的x即指用Xml交换数据)。

2.4 JSON语法(www.json.org)

1)如何表示一个对象

{ 属性名:属性值,属性名:属性值……}

u 注意事项:

v 属性名要使用引号括起来。

v 属性值如果是字符串,要使用引号括起来。

v 属性值可以是string、number、boolean、null、object。

例如:function f1(){//表示一个对象

var obj={'name':'chang','age':22}; alert(obj.name); }

  function f2(){//表示一个对象

var obj={'name':'bo','address':{  'city':'beijing',  'room':'1101' } };

alert(obj.address.room); }

u 注意事项:JavaScript中创建对象的三种方式(也可看JavaScript笔记中的第8章):

    方式一:使用Json语法来创建

     var p = {'name':'zs','age':22};

    方式二:使用Object来创建

     var obj = new Object(); obj.name = 'zs'; obj.age = 22;

    方式三:利用JavaScript函数来创建(对象模版)

     function Person(name,age){

      this.name = name;    this.age = age; }

      var person1 = new Person("zs",22)

2)如何表示一个对象组成的数组,[  {},{},{},…… ]

例如:function f3(){//表示一个对象组成的数组

 var arr=[{'name':'chang','age':22},{'name':'bo','age':23}];

   alert(arr[1].name); }


2.5如何使用JSON来编写Ajax应用程序

…………………………


………………

…………

……

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Ajax学习总结(一)

Ajax学习(一) 一、      什么是ajax 1、Ajax(Asynchronous JavaScript and XML)使用脚本操纵HTTP的Web应用架构。 2、所有的浏览器都支持X...
  • u010913443
  • u010913443
  • 2016-08-13 17:31
  • 1019

jquery 中的ajax总结

jquery对ajax请求进行了封装,在jquery中$.ajax()方法属于最底层的方法,第2层是load()、$.get()、$.post()方法而第3层是$.getScript()和$.getJ...
  • QH_JAVA
  • QH_JAVA
  • 2017-03-23 19:27
  • 768

【Ajax】——学习后的小结

背景:牛腩中接触过CSS,当时对这个CSS情有独钟,因为它可以美化界面,而我就喜欢和界面这种看得见效果的东西打交道,现在又重新学习,而且内容还那么多,超级开心,废话少说,动手吧! 一、CSS滤镜 ...
  • u013043341
  • u013043341
  • 2016-01-15 21:46
  • 877

AJAX学习总结(入门)

AJAX教程:http://www.w3school.com.cn/ajax/index.asp AJAX视频教程:http://www.imooc.com/view/250
  • doris_d
  • doris_d
  • 2015-03-03 09:57
  • 948

Ajax学习总结(1)——Ajax实例讲解与技术原理

摘要:AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的...
  • u012562943
  • u012562943
  • 2016-01-04 10:18
  • 1767

ajax异步实验

在前端中,ajax经常被使用。以下我们看看ajax的异步是怎样表现出来的: $.get('index.php', {}, function(response){ consol...
  • sinat_31710221
  • sinat_31710221
  • 2017-04-05 18:45
  • 386

总结套路:Ajax请求下载文件的问题

总结套路:Ajax请求下载文件的问题
  • ShangQuan2012
  • ShangQuan2012
  • 2017-03-19 21:13
  • 4951

Ajax深入学习笔记

最近在学习ajax,下面整理了一下学习的内容,以便巩固用。 先来看看为什么要用ajax,也就是同步和异步是什么:同步和异步同步的意思就是客户端提交表单,发起请求后需要一直等待服务器端的响应,收到服务...
  • VivianHope
  • VivianHope
  • 2015-06-03 15:54
  • 1684

Jquery,Ajax等前端技术总结一

装糊涂的前提是已明白。 技术和生活一样,每一步我们都要知道自己在做什么,否则,你连装糊涂的权利都没有了,走马观花而已。 关于项目中引用的Jquery插件 一:Jque...
  • haiyangzhibing
  • haiyangzhibing
  • 2014-01-21 11:28
  • 2306

自学jsp+servlet+ajax的一些知识的总结

1、Servlet+JSP+EL 表达式语言; 服务端 返回list  客服端 接收list request.setAttribute("lists", list); ${requestSco...
  • qq_18808965
  • qq_18808965
  • 2017-01-14 21:58
  • 551
    个人资料
    • 访问:55248次
    • 积分:1035
    • 等级:
    • 排名:千里之外
    • 原创:48篇
    • 转载:1篇
    • 译文:0篇
    • 评论:6条
    最新评论