复习日记-Ajax/JSON

淩亂°似流年 2021-12-21 09:47 186阅读 0赞

AJAX的作用：

完成页面局部刷新而不影响用户的体验.

\* 用户名是否已经存在的校验

\* 百度信息输入的提示

...

使用AJAX：

JavaScript和XML

\* XMLHttpRequest:

\* 属性：

\* onreadystatechange:

\* readyState:

\* status:获得状态码

\* responseText   :响应的文本

\* responseXML    :响应的XML

\* 方法:

\* open(“请求方式”,”请求路径”,”是否异步”);

\* send(“提交的参数”);

\* setRequestHeader(“头信息”,”头的值”);

开发步骤：

1.获得XMLHttpRequest对象.

\* IE将XMLHttpRequest封装到一个ObjectXActive插件中.

\* Firefox直接可以创建XMLHttpRequest.

2.设置状态改变触发一个函数.

3.打开一个链接.

4.发送请求.

【AJAX的GET入门】

创建XMLHttpRequest

function createXMLHttpRequest() \{

var xmlHttp;

try \{ // Firefox, Opera 8.0+, Safari

xmlHttp = new XMLHttpRequest();

\} catch (e) \{

try \{// Internet Explorer

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

\} catch (e) \{

try \{

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

\} catch (e) \{

return xmlHttp;

AJAX的代码：

function loadData() \{

// 1.创建异步XMLHttpRequest对象

var xhr = createXMLHttpRequest();

// 2.设置状态改变触发一个函数

xhr.onreadystatechange = function()\{

// 回调函数.

if(xhr.readyState == 4)\{// 请求发送完成

if(xhr.status == 200)\{// 响应也正确

var data = xhr.responseText;

document.getElementById("d1").innerHTML=data;

// 3.打开一个连接：

xhr.open("GET","/WEB15/ServletDemo1",true);

// 4.发送请求

xhr.send(null);

【AJAX的POST入门】

function loadData()\{

// 1.创建异步对象

var xhr = createXMLHttpRequest();

// 2.设置状态改变触发的函数

xhr.onreadystatechange = function()\{

if(xhr.readyState == 4)\{

if(xhr.status == 200)\{

document.getElementById("d1").innerHTML=xhr.responseText;

// 3.打开连接

xhr.open("POST","/WEB15/ServletDemo2",true);

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

// 4.发送数据

xhr.send("name=李四&password=456");

jQuery中的Ajax：

四种方法：

方法一：对象.load(url,params,callbackfunction(返回的数据data)\{\});

一般不使用这种方式：因为不能注明post还是get，容易出现编码问题

方法二：$.get(url,params,function(data)\{\},type);

url:请求路径

params:请求参数，参数为key/value格式  key=value或者 \{ “key" : "value"\} json格式

function(data):回调函数，data就是服务器发送回来的数据

type：返回信息的格式，一般用json

若type为json格式，返回值是一个json对象，获取特定值需要参数data.键名

方法三：$.post(url,params,function(data)\{\},type);

url:请求路径

params:请求参数，参数为key/value格式  key=value或者 \{ “key" : "value"\} json格式

function(data):回调函数，data就是服务器发送回来的数据

type：返回信息的格式，一般用json

方法四：$.ajax(\[选项\])；

选项的可选值：

url：请求路径

type：请求方式

data：发送到服务器的数据

success：成功以后的回调

error：异常之后的回调

datatype：预期服务器返回的数据格式，一般使用json

json:轻量级的数据交换格式，基于ECMAScript的一个子集

json格式：

格式一：value可以为任意值(value也可以为json串)

\{"key":"value","key1":"value"\}

格式二：元素e也可以为任意值...

\["e1","e2"\]

jsonlib工具类，可以使我们的对象转换成json数据

1.导入jar包

2.使用api

JSONArray.fromObject(对象)      --数组和list

JSONObject.fromObject(对象)    ---bean和map

注意：在后台给前台返回数据的时候，使用response.getWriter.println(list)会出问题，解决办法是返回给前台一个json格式数据

转载于:https://www.cnblogs.com/tfboy/p/10383961.html

复习日记-Ajax/JSON

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 flex日记

相关心情日记

相关日记

相关实验日记

相关学习日记

相关复习日记-Struts2

相关日记

相关复习日记-Struts2

相关复习日记-Ajax/JSON

相关复习日记-xml/tomcat/response/request