文档章节

Ajax

centrald
 centrald
发布于 2016/03/25 00:12
字数 1452
阅读 96
收藏 11


1.Ajax介绍:

  AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。= 异步 JavaScript和XML(标准通用标记语言的子集)。

     AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

2.Ajax作用:

  AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。

      AJAX 可使因特网应用程序更小、更快,更友好。

3.Ajax使用步骤:

    1> 创建 xmlhttpRequest对象          

      

 function getXMLHttpRequest() {
				if (window.XMLHttpRequest) {// code for all new browsers   和其他主流浏览器
					xmlhttp = new XMLHttpRequest();
				} else if (window.ActiveXObject) {// code for IE5 and IE6  老版IE
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
			}

 

    2> 绑定一个事件函数: onReadyStateChange

        readystate

                0 对象创建过程

                1 对象创建完成

                2 调用send发送

3 发送中,但未接受完成

4 全部完成

status 服务器返回的状态码

200 响应成功

     3> 调用open方法: 指定请求方式&请求路径&是否异步 

     4> 调用SetRequestHeader添加请求头(可选,post请求中需要发送正文参数).

                 Content-Type=application/x-www-form-urlencoded

      5> 调用Send方法: 真正的连接服务器发送数据.

方法参数: 指定请求正文内容.

4.对于ajax进行封装:

不同的ajax请求:(1)请求方式(2)请求参数(3)URL(4)对响应的处理函数(5)返回响应类型

function ajax(method,jsonparam,url,fun,responseType){
			//1.创建xmlHttpRequest
				var req = new XMLHttpRequest();
			//2.绑定onreadystatechange 监听函数
				req.onreadystatechange=function(){
					if(req.readyState==4){
						if(responseType=="text"){ // 返回值是文本
							fun(req.responseText,req.status,req);
						}else if(responseType=="xml"){//返回值是xml
							fun(req.responseXML,req.status,req);
						}else if(responseType=="json"){//返回值是json
							var json = eval("("+req.responseText+")");
							fun(json,req.status,req);	
						}
					}
				};
			
			//拼接参数
			var param = "";
			//遍历需要发送的参数json对象
			for(var key in jsonparam){
				var value = jsonparam[key];
				//取出键值对,并拼装参数键值对
				param+= key+"="+value+"&";
			}
			// 去掉最后一个"&"号
			param = param.substring(0, param.length-1);
			
			if(method=="GET"){
		//参数拼接在url后面
			//3.调用open方法,设置连接参数
				req.open(method,url+"?"+param);
			//4.调用send方法发送请求
				req.send();
			}else if(method=="POST"){
		//参数拼装后放入send方法
				//3.调用open方法,设置连接参数
				req.open(method,url);
				//设置请求头
				req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				//4.调用send方法发送请求
				req.send(param);
			}

5.JQuery中ajax的封装

原始封装: $.ajax(url,[settings]) 

对原始封装的封装(常用):

load(url,[data],[callback])   将服务器返回的信息加载到页面的某个元素上

$.get(url,[data],[fn],[type])

$.post(url,[data],[fn],[type]) 

对原始封装的封装的封装:

$.getJSON(url,[data],[fn])   获得服务器返回的json(对象)

$.getScript(url,[callback])  动态加载js文件到页面中


1>load(url,[data],[callback]) 访问一个url,将url返回的数据,加载到指定的位置

url:待装入 HTML 网页网址。

data:发送至服务器的 key/value 数据。 如果填写了参数=>doPost,不写参数=>doGet

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

2>$.get(url,[data],[fn],[type])   => 封装ajax的get请求

url:待载入页面的URL地址

data:待发送 Key/value 参数。

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

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

3>$.post(url,[data],[fn],[type])  封装ajax的post请求

url:待载入页面的URL地址

data:待发送 Key/value 参数。

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

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

4>$.getJSON(url,[data],[fn])   => 相当于 get/post方法中第4个参数填写"json" => 返回的数据就使用json封装

url:发送请求地址。

data:待发送 Key/value 参数。

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

5>$.getScript(url,[callback])   如果有一段js,我们需要他在指定时间载入到页面中 (动态载入js文件)

url:待载入 JS 文件地址。

callback:成功载入后回调函数。 (不用)

6>$.ajax(url,[settings]) 最原始的ajax封装 ,提供大量的可配置的参数,完成我们任何需求.之前学习的5个ajax方法,实际上底层调用的都是该函数

settings: 可选参数

url : 访问的路径

type: 请求方式

dataType:返回值类型

data: 提交的参数

async: 是否是异步的

success: 成功后回调的函数

6.案例:使用ajax技术验证登录用户名是否存在

(1)使用原生ajax操作

<html>
  <head>	
	
	<script type="text/javascript">
		window.onload=function(){
			//1.获取用户输入的用户名信息
			var user = document.getElementById("userName");
			//2.失去焦点时触发ajax
			user.onblur=function(){
				//1>创建XMLHttpRequest对象
				var xmlHttpReq = new XMLHttpRequest();
				//2>使用open方法绑定请求方式,url,是否异步等信息
				xmlHttpReq.open("Post","${pageContext.request.contextPath}/UserServlet", true);
				//3>设置请求头
				xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded" );
				//4>发送数据给服务器
				xmlHttpReq.send("name="+user.value);
				//5>给xmlHttpReq绑定一个回调函数来处理响应信息
				xmlHttpReq.onreadystatechange=function(){
					//当readyState 等于 4 且状态为 200 时,表示响应已就绪
					if(xmlHttpReq.readyState==4&&xmlHttpReq.status==200){
						var message = xmlHttpReq.responseText;
						document.getElementById("warnMessage").innerHTML = message;
					}
				};
			};
		};
	</script>
	
	  </head>
  
  <body>
  	<form>
  		<table>
  			<tr>
  				<td>
  				用户名:
  				</td>
  				<td>
  				<input type="text" id="userName"/>
  				<span id = "warnMessage"></span>
  				</td>
  				
  			</tr>
  		</table>
  	</form>
  </body>
</html>

(2)使用JQuery封装的ajax方法操作

<html>
  <head>
	<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
	
 		function func(obj){
			$("#warnMessage").load("${pageContext.request.contextPath}/UserServlet",{name:obj.value});
		}

		
	
	</script>
	
	  </head>
  
  <body>
  	<form>
  		<table>
  			<tr>
  				<td>
  				用户名:
  				</td>
  				<td>
  				<input type="text" onblur="func(this);"/>
  				<span id = "warnMessage"></span>
  				</td>
  				
  			</tr>
  		</table>
  	</form>
  </body>
</html>






© 著作权归作者所有

下一篇: 事务
centrald
粉丝 13
博文 112
码字总数 120823
作品 0
杭州
程序员
私信 提问

暂无文章

作为一个(IT)程序员!聊天没有话题?试试这十二种技巧

首先呢?我是一名程序员,经常性和同事没话题。 因为每天都会有自己的任务要做,程序员对于其他行业来说;是相对来说比较忙的。你会经常看到程序员在发呆、调试密密麻麻代码、红色报错发呆;...

小英子wep
今天
15
0
【SpringBoot】产生背景及简介

一、SpringBoot介绍 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程,该框架使用了特定的方式来进行配置,从而使开发人员不再需要...

zw965
今天
5
0
简述并发编程分为三个核心问题:分工、同步、互斥。

总的来说,并发编程可以总结为三个核心问题:分工、同步、互斥。 所谓分工指的是如何高效地拆解任务并分配给线程,而同步指的是线程之间如何协作,互斥则是保证同一时刻只允许一个线程访问共...

dust8080
今天
6
0
OSChina 周四乱弹 —— 当你简历注水但还是找到了工作

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享成龙的单曲《男儿当自强》。 《男儿当自强》- 成龙 手机党少年们想听歌,请使劲儿戳(这里) @hxg2016 :刚在...

小小编辑
今天
3.4K
22
靠写代码赚钱的一些门路

作者 @mezod 译者 @josephchang10 如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。 今天给大家分享一个精彩的 GitHub 库,这个库整理...

高级农民工
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部