javaWeb(七)ajax远程调用

1.处理ajax请求的时候页面不允许跳转(默认使用的是异步请求),并且在ajax使用的时候,不能 使用el表达式

2.调用方法 $.ajax([json指令]);

$.ajax({

url:"login",

type:"post",

asyne:true; 异步操作 默认值

data:{id:$("#id").val() }

dataType:"json" 返回值类型 默认是字符串

success:function(data){

if(data==0){

$("message").text("用户名不存在,可以使用");

}

}

})

3.同步请求和异步请求的区别

性能上异步请求高于同步请求, 如果全局需要某个变量的时候就只能用同步来进行接收返回值.

4.将java List 转换成json数组 使用阿里 fastjson

String [] str = JSONObject.toJSONString(students);

response.getWriter().print();

 

 

网易云课堂:ajax学习

1.Ajax是允许浏览器与服务器通信而无须刷新的一种交互技术(异步的js与xml的交互)只要是与服务器进行交互而页面不刷新的技术都就做Ajax(数据在客户端与服务器之间独立传输,服务器不再返回整个页面)---缺陷由于需要使用js和Ajax引擎导致的浏览器的兼容性问题--页面局部刷新,没有后退的功能--对流媒体文件没有Flash好-对于一些手持设备支持差;

--XMLHttpRequest 该对象是js的一个扩展,可使网页与服务器进行通信,是创建ajax的最佳选择,实际上通常吧Ajax当成XMLHttprequest对象的代名词

工作原理图:

客户端(页面)------传输(协议xmlhttp 载体:文本 json等)------服务器

2.XMLHttpRequest的概述

--XMLHttpRequest最早是在IE5中来实现的,创建一个XMLHttpRequest对象

--IE吧XMLHttpRequest实现为一个ActiceX对象

--其他浏览器 把它实现为一个本地的JS对象;

--XMLHttpRequest在不同浏览器上的实现是兼容的,所以可以用同样的方式访问XMLHttpRequest实例的属性和方法,而不用讨论这个实例创建的方式是什么;

--XMLHttpRequest的方法:

--avort()---停止当前的请求

--getAllRequestHerders()--把HTTP请求的所有响应首部作为键值对放回

--getResponseHeader("header")---返回指定首部的串值

--open("method","url")---建立对服务器的调用,Method参数可以是GET/Psot货PUT

---url参数可以是相对url或者是绝对的url

--send(content)---向服务器发送请求

--setRequestHeaser("header","value")--把指定首部设置为所提供的值,,在设置任何首部之前必须先调用open();

--XMLHttpRequest的属性:

--onreadtstatechange--每个状态改变都会出发这个时间处理,通常会调用一个JS函数

--readyState--请求中的状态,有5个可取值,0=未初始化,1=正在加载,2=已经加载,3=交互中 4=完成;

--responseText服务器的响应,表示为一个串

--responseXML--服务器的响应,表示为xml,这个对象可以解析为dom对象

--statue---服务器的HTTP状态码

--statusText--HTTP状态码的响应文本

 

--利用XMLHttpRequest实例与服务器进行通信含以下3个关键部分

--onreadystatechange事件处理函数

--该事件有服务器触发,而不是用户--在Ajax执行过程中,服务器会通知客户端当前通信状态,依靠XMLHttpRequest对象的readyState来实现,改变readyState属性是服务器对客户端连接操作的一种方式,每次readyState属性的盖面都会触发readystatechange事件;

--open 方法

--open()方法允许程序员用一个Ajax调用服务器发送请求,

method请求类型类似GET或者Post的字符串,若只想从服务器检索一个文件而不需要发送任何数据,使用GET,如需要想服务器发送数据,用POST

--send 方法

3.数据传输格式

--Ajax是一门与语言无关的技术,从服务器端接收数据的时候,那些数据必须以浏览器能够理解的格式来发送,服务器端的变成语言智能以如下3种格式返回数据--XML--JSON--HTML

--解析HTML如要要用XMLHttpRequest发送的话,文本将存储在responseText属性中,不必从responseText属性中读取数据,它已经是希望的格式,可以直接插入到页面中,插入Html代码最简单的方法是更新这个元素的innerHTML属性;

--HTML小结:优点:从服务端发送的HTML代码在浏览器端不需要解析直接插入-HTML代码的可读性好-HTML代码块与innerHTML属性搭配.效率高-----缺点:如需要通过ajax更新一篇文档的多个部分,HTML不合适,另外innerHTML并非DOM标准;

--XML格式--

--JSON格式:一种简单的数据格式---是javascript的原生格式

--解析json:json只是一种文本字符串,他被存储在responseText属性中,为了读取存储在responseText属性中的JSON数据,需要根据JavaScript的eval语句 函数 eval()会把一个字符串当做它的参数,然后这个字符串会被当做javascript代码来执行,因为json的字符串就是由javascript代码构成的,所以它本身是可执行的 使用parseJson()方法将字符串解析成JS对象;

 

--对比:应用程序不需要与其他应用程序共享数据的时候使用HTML代码返回数据时最简单---如果数据需要重用 JSON文件是个不错的选择,在性能和文件大小方面有优势--当远程应用程序未知的时候,XML文档是首选,因为XML是WEB服务领域的世界语;

 

4.使用Jquery中的Ajax:jQuery对ajax操作进行了封装,在jQuery中最底层的方法是$.ajax() 第二层是 load(),$.get()和$.post(),第三层是:$.getScript 和 $.getJSON()

--load()方法是jQuery中最简单和常用的ajax方法能载入远程的HTML代码,并插入到DOM中,他的结构是(url,[,data][,callback]);

--细节:传递方式:load()方法传递的参数根据参数data来自动自定,如果没有参数传递,采用get方式传递,否则采用post方式,对于必须在加载完成才能继续的操作,load()方式提供了回调函数,该函数有三个参数,:代表请求返回内容的data,代表请求状态的textStatus对象和XMLHttpTequest----任何一个html节点都可以使用load方式来加载ajax,结果将直接插入html节点中

 

--$.get()方式使用GET方式来进行异步请求,它的结构是:$.get(url[,data][,callback],type);

$.get()方法的回调函数只有两个参数:data代表返回的内容,可以是xml文档,json文件.HTML片段等.;textstatus代表请求状态,值可能为success,error,notmodify,timeout的4种;

$.get()和$.post()方法是jQuery中的全局函数,而find()等方法都是对jQuery对象进行操作的方法;

$.post()--url---args:json格式---function:回调函数: 当响应结束时,回调函数被触发,响应结果在data中.

通过$.getJSON()可以直接返回一个jQuery对象.可以直接拿来用