Ajax-01

Posted fenqinearl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax-01相关的知识,希望对你有一定的参考价值。

问题:

目前来,所有的请求的发送都是通过浏览器自己直接进行发送,响应是浏览器在接收到,响应信息后自主的将响应数据覆盖当前页面显示。现在,要求在保留原有页面内容的情况下显示新的响应内容。

解决:

AJAX技术

AJAX简介及原理

AJAX = Asynchronous javascript and XML(异步的 JavaScript 和 XML)。

请求由ajax引擎对象发送,响应数据,浏览器不会直接进行处理,而是流转给发请求的ajax引擎对象。
这样我们可以通过操作ajax引擎对象变相的实现在页面中显示新的响应资源。

优点:

  • Ajax在本质上是一个浏览器端的技术
  • Ajax技术之主要目的在于局部交换客户端及服务器间之数据
  • 这个技术的主角XMLHttpRequest 的最主要特点,在于能够不用重新载入整个版面来更新资料,也就是所谓的Refresh without Reload(轻刷新)
  • 与服务器之间的沟通,完全是透过Javascript 来实行
  • 使用XMLHttpRequest 本身传送的数据量很小,所以反应会更快,也就让网络程式更像一个桌面应用程序
  • AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料,最后再由Javascript 或DOM 来帮你呈现结果,因为所有动作都是由Javascript 代劳,所以省去了网页重载的麻烦,使用者也感受不到等待的痛苦

XMLHttpRequest对象

  • AJAX的核心。
  • 不同浏览器创建方式不同
  • 异步从服务器端获取数据

使用XMLHttpRequest对象

1 .创建ajax引擎对象

var ajax;
 if(window.XMLHttpRequest)
 ajax=new XMLHttpRequest//火狐 谷歌
else if(window.ActiveXObject)
 ajax=new ActiveXObject("Msxml2.XMLHTTP");//ie
 


2 .声明ajax监听函数

ajax.onreadystatechange=function()
 //判断数据状态码
if(ajax.readyState==4)//4 表示响应数据成功接收
//判断响应状态码
if(ajax.status==200)
//获取响应数据
//普通文本
//json格式数据
var data=ajax.responseText;
 //xml数据
//var doc=ajax.responseXML;
var data=ajax.responseText;
 //处理响应数据(js的DOM操作)
var
showdiv=document.getElementById("showdiv");
showdiv.innerhtml=data;
 else if(ajax.status==404)
var
showdiv=document.getElementById("showdiv");
showdiv.innerHTML="请求资源未找到";
 else if(ajax.status==500)
var
showdiv=document.getElementById("showdiv");
showdiv.innerHTML="服务器繁忙";
 
 
 


3 创建并发送请求

ajax.open(method,url,async)
ajax.send("请求数据")


解释:

method:表示请求的方式,值为get/post

url:表示请求地址,一般为要请求的servlet的别名。

async:表示异步还是同步请求,true表示异步,false表示同步,

默认为异步。

注意:

如果请求方式是get方式,则请求数据需要拼接在url的后面,

以?隔开,键值对。并且send中要写null

如果是post请求方式,则在send方法中书写请求数据即可。并

且要声明数据的提交格式为键值对。

示例:

//使用get方式

ajax.open("get","user?uname="+uname,true);
ajax.send(null);


//post方式

ajax.open("post","user", true);
//设置请求数据的格式

ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded

");
ajax.send("un="+uname);

 

ajax的响应数据格式


普通文本:
后台在接收到ajax请求后,处理后直接响应普通字符串给ajax
josn数据:
后台在接收到ajax请求后,处理后响应json格式的字符串给ajax,ajax处理代码中使用eval()方法将json数据转换为js对的对象,将对象中的数据通过js的dom操作显示到页面中。

注意:

json格式:

var 对象名=

键名:值,

键名:值,

........

xml数据:
后台在接收到ajax请求后,处理后响应xml格式的字符串给ajax。

前台使用ajax.responseXML进行数据接收,返回的是xml文档对象(document)。使用document对象将xml中取出并显示到页面中即可。

注意:

后台的响应数据格式必须设置成xml格式:

resp.setContentType("text/xml;charset=utf-8");


注意:
ajax是前端的技术,由浏览器进行解析执行。

使用流程(原生):
1 创建ajax引擎对象
2 覆写onreadystatechange函数
判断数据状态码
判断响应状态码
获取响应数据
处理响应信息
3 创建并发送请求
封装:
相同的保留,不同的传参。最终封装成一个js文件。
---------------------------------------------------------------------------------------------------------

jquery中的ajax:

w3c-jquery-ajax
使用方式:
1 $.get(url,data,fn)
2 $.post(url,data,fn)
3 $.ajax(
type:"get",
url:"data",
success:function(data)
alert(data);

)

注意:

$.get和$.post方式中的data为json格式的请求数据
以上三种方式,请求成功后的回调函数中的形参表示响应的数据。

以上是关于Ajax-01的主要内容,如果未能解决你的问题,请参考以下文章

AJAX-----01远古时期的ajax

Ajax-01

ajax01简介

054_Ajax 01

12.Django与ajax

JavaScript之Ajax-1 Ajax(Ajax原理Ajax对象属性和方法)