Ajax:
即"Asynchronous JavaScript And XML", 异步JavaScript和XML , 是指一种创建的交互式页面应用的网页开发技术,它并不是新的技术
ajax 并非一种新的技术,而是几种原有技术的结合体。由以下几种技术组合而成:
- 1.使用CSS和XHTML来表示
- 2.使用DOM模型来交互和动态显示
- 3.XMLHTTPRequest来和服务器进行异步通信,是ajax的基础(详见w3cShool)
- 4.使用JavaScript来绑定和调用
在以上所述技术中,除了XmlHttpRequest对象以外,其他所有的技术都是基于Web标准并且已经得到了广泛使用,XMLHTTPRequest虽然还没有被W3C采纳,但已经是一种事实的标准。
典例:
- 注册网站时,提示输入的用户名已经被注册
作用:
如果想要刷新网页局部内容,那么需要重新载入整个网页。Ajax解决了局部刷新的问题,提高了用户体验。
1 Ajax的简单使用
创建对象:
function ajaxFunction(){ ??????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; ????}
发送请求:
????//执行get请求 ????function get(){ ????????// 1 创建xmlhttprequest对象 ?????????var request = ?ajaxFunction() ????????// 2 发送请求 ?参数一 ?请求类型 ?参数二 路径 参数三 是否异步 ????????request.open("GET","/8AjaxAndJquery/ServletDemo01",true); ????????request.send(); ????}
2 AJAX GET 向服务器发送数据,获取服务器响应的数据
/* ????//向Servlet发送数据 ????function get(){ ????????// 1 创建xmlhttprequest对象 ?????????var request = ?ajaxFunction() ????????// 2 发送请求 ?参数一 ?请求类型 ?参数二 路径 参数三 是否异步 ????????request.open("GET","/8AjaxAndJquery/ServletDemo01?name=aa&age=18",true); ????????request.send(); ????} */ ?????????//接收Servlet响应的数据 ????function get(){ ????????// 1 创建xmlhttprequest对象 ?????????var request = ?ajaxFunction() ????????// 2 发送请求 ?参数一 ?请求类型 ?参数二 路径 参数三 是否异步 ????????request.open("GET","/8AjaxAndJquery/ServletDemo01?name=aa&age=18",true); ????????// 3 获取响应数据,注册监听的意思,如果状态改变,执行等号右边的方法 ????????request.onreadystatechange = function(){ ????????????if(request.readyState == 4 && request.status == 200){ ????????????????//弹出响应的信息 ????????????????alert(request.responseText); ????????????} ????????} ????????request.send(); ????}
3 AJAX POST 向服务器发送数据,获取服务器响应的数据
//1 创建对象function ajaxFunction(){ ??????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; ????} ?????//2 发送请求 ???function post(){ ??????// 1 创建对象 ??????var request = ajaxFunction(); ??????// 2 发送请求 ??????request.open("POST" ,"/8AjaxAndJquery/ServletDemo01" ,true); ?????
?????// 如果要获取数据,加一个状态的监听 ??????request.onreadystatechange = function(){ ??????????if(request.readyState == 4 && request.status == 200){ ??????????????alert("post:"+request.responseText); ??????????} ??????} ??????// 3 带数据过去 ??????//如果是post请求,那么这里要添加请求头,说明提交的数据是一个经过url编码的form表单数据 ??????request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); ??????//在send方法里面写表单数据 ??????request.send("name=aobama&age=29"); }
十七 Ajax&JQuery
原文地址:https://www.cnblogs.com/ltfxy/p/10247337.html