什么是ajax和json,ajax和json

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

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

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

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

ajax 请求和响应，数据量小

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

传输，这个就是 ajax 技术。

获取 XMLHttpRequest 对象(ajax 核心对象，ajax 引擎)

//获取 ajax 核心对象的方法

function getXHR() {

var xmlhttp;

if (window.XMLHttpRequest) {

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp = new XMLHttpRequest();

} else {

// IE6, IE5与其他浏览器不同

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

}

return xmlhttp;

}

alert(getXHR());

向服务器发送请求——使用 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