ajax和json

ajax介绍

问题：用户注册的时候，没有，用户名是否可用提示，导致用户需要反复的提交表单，用户体验不好。

优化：用户在书写完用户名，就有一个提示，告诉当前书写的用户名是否可用

Ajax 特点：

ajax 执行，不需要用户控制，自动发送请求和接收响应

ajax 发送请求的时候，依然按照 http 协议

ajax 请求和响应，数据量小

总结什么是 ajax：自动发送请求，接受响应，数据量非常小，依然按照 http 协议做网络的

传输，这个就是 ajax 技术。

获取 XMLHttpRequest 对象（ajax 核心对象，ajax 引擎）

向服务器发送请求——使用 open 方法和 send 方法

//测试使用 ajax 核心对象，发送请求

function test1(){

var xhr = getXHR();

xhr.open("get","/day18/ajax?username=张三",true);

//是什么：规定请求的类型、 URL 以及是否异步处理请求。

//当是post提交时请求参数放在send（）中

xhr.send();

}

test1();

接收服务器响应

//测试 ajax 获取响应

function test2(){

var xhr = getXHR();

xhr.open("get","/day18/ajax?username=张三",true);

xhr.send();

/**

有一个妹子，半夜十二点，搜索一些东西

妹子（上海），百度的服务器（北京）（网络延迟）

服务器发送响应到浏览器（网络延迟）

为什么获取响应数据没有效果？

就是没有考虑网络延迟的问题

*/

//浏览器端准备接受响应

var data = xhr.responseText;

alert(data);

}

设置 onreadystatechange 事件执行函数（等待服务器响应）

//测试设置 ajax 等待服务器响应

function test3(){

//获取核心对象

var xhr = getXHR();

//设置等待服务器响应

xhr.onreadystatechange=function(){

//4: 请求已完成，且响应已就绪,200: "OK"

if (xhr.readyState==4 && xhr.status==200){

var data=xhr.responseText;

alert(data);

}

}

//发送请求

xhr.open("get","/day18/ajax?username=张三",true);

xhr.send();

}

test3()

ajax 小结（ajax 代码怎么写）

获取核心对象

设置等待服务器响应

发送请求

onreadystatechange 属性

是什么：

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

第三个参数 async： True（异步） 或 False（同步）？

async false 所有的请求和响应，需要排队执行（同步）

async true 所有的请求和响应,不需要排队执行（插队执行）（异步）

readyState 属性

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

status 属性

是什么：存储响应状态码

jQuery Ajax 支持的 API

jQuery 对 Ajax 的使用提供了非常好的封装，简单的很！

load(url, [data], [callback]) 载入 HTML 代码并插入至 DOM中，例如： $(“#mydiv”).load(“a.html”);

$.get(url, [data], [callback], [type]) Ajax 的 get 方式请求，一般用于获取数据

$.post(url, [data], [callback], [type]) Ajax 的 post 方式请求，一般用于发送表单数据

$.getJSON(url, [data], [fn]) Ajax 跨域获取服务器数据 例子： www.taobao.com 支付 www.alipay.com

$.getScript(url, [callback]) 载入并执行一个跨域的 js 文件

url：待载入页面的URL地址

data：待发送Key/value参数。

callback：载入成功时回调函数。

type:返回内容格,xml,html,script,json,text,_default.

$.ajax(url, [settings])

$.ajax({

//请求方式 type: "POST",

//请求路径 url: "${root}/ajax",

//发送参数  data: "name=John&location=Boston",

//返回的数据类型：

/**

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含的script标签会

在插入dom时执行。

"script": 返回纯文本 JavaScript 代码。

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。

"text": 返回纯文本字符串

*/

dataType: "text",

//回调函数

//请求成功的回调函数

success: function(msg){

alert( "Data Saved: " + msg );

},

//请求失败的回调函数

error:function(msg){

alert( "Error");

}

});

get

/*

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式， xml, html, script, json, text, _default。

*/

$.get("ajax", { name: "John", time: "2pm" },

function(data){

alert("Data Loaded1: " + data);

});

​

post

/*

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式， xml, html, script, json, text, _default。

*/

$.post("ajax", { name: "John", time: "2pm" },

function(data){

alert("Data Loaded2: " + data);

});

});

JSON 技术

Json 介绍

Xml 问题：导致传输的数据量变大，解析和创建的操作复杂

JSON 字符串转换为 JavaScript 对象：  eval() 或 JSON.parse() 方法

JavaScript对象转换为 JSON 对象：  JSON.stringify()

java对象转成JSON