Ajax学习笔记 -- day01 Ajax介绍及使用

于 2017-07-15 10:31:09 发布
阅读量380 收藏 1
点赞数
分类专栏： javaWeb基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wingzhezhe/article/details/75143857
版权

一、Ajax介绍

1、什么是 ajax

      AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）可以使网页实现异步更新，就是不重新加载整个网页的情况下，对网页的某部分进行更新（局部刷新）。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

      AJAX = 异步 JavaScript和XML，是一种新的思想，整合之前的多种技术，用于创建快速交互式网页应用的网页开发技术。

      Ajax:  不利用表单,连接的前提下,利用JS偷悄悄的和服务端传递数据。

2、ajax原理介绍


       使用JavaScript获得浏览器内置的AJAX引擎（XMLHttpRequest对象）

       通过AJAX引擎确定请求路径和请求参数

       通知AJAX引擎发送请求

       AJAX引擎会在不刷新浏览器地址栏的情况下，发送请求

       服务器获得请求参数

       服务器处理请求参数（添加、查询等操作）

       服务器响应数据给浏览器

       AJAX引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据传递给浏览器页面。

      通过设置给AJAX引擎的回调函数获得服务器响应的数据

      使用JavaScript在指定的位置，显示响应数据，从而局部修改页面的数据，达到局部刷新目的。

3、执行流程

（1）、获取AJAX引擎对象(JS内置对象)

（2）、为AJAX引擎对象绑定请求路径,参数

（3）、为AJAX引擎对象设置回调函数,当状态发生改变的时候,做一些处理

（4）、利用AJAX引擎对象发送请求

（5）、利用AJAX引擎对象获取到服务端响应回来的数据做进一步处理

二、使用 JavaScript 调用 ajax    --    很少利用此方式

1、servlet中的代码

package cn.itcast.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ServletDemo01 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			Thread.sleep(3000);
		} catch (Exception e) {
			e.printStackTrace();
		}
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		System.out.println(name+"<===>"+age);
		response.getWriter().println(name+":"+age);
	}

}

2、GET 方式HTML中的 js 代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试JS调用Ajax中的GET形式</title>
</head>
<body>
<button οnclick="fn()">按钮</button>
<input type="text" name="dd" id="tx"/>
</body>
<script type="text/javascript">

//------------------------------此部分为固定格式-----------------------------------
function ajaxFunction()
{
var xmlHttp;

try
   {
  // Firefox, Opera 8.0+, Safari
   xmlHttp=new XMLHttpRequest();
   }
catch (e)
   {

 // Internet Explorer
  try
     {
     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
     }
  catch (e)
     {

     try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
     catch (e)
        {
        alert("您的浏览器不支持AJAX！");
        return false;
        }
     }
   }
   
   return xmlHttp;
}
//------------------------------此部分为固定格式-----------------------------------

//调用ajax的函数
function fn(){
	//测试Ajax
	//1_获取Ajax核心对象
	var xmlHttp=ajaxFunction();
	
	//4_为ajax核心对象设置一个回调函数
	//为xmlHttp绑定事件:当状态发生改变的时候触发一个事件
	xmlHttp.onreadystatechange=function(){
		alert(xmlHttp.readyState);
		//当xmlHttp的readyState属性值为4:服务端已经正常响应完毕
		if(xmlHttp.readyState==4){
			//当xmlHttp的status为200代表本次正常响应成功
			if(xmlHttp.status==200){
				//通过xmlHttp的responseText属性获取到服务端响应回的数据
				//alert(xmlHttp.responseText);
				document.getElementById("tx").value=xmlHttp.responseText;
			}
		}
	}
	
	//2_为Ajax核心对象绑定路径,参数 1:请求的方式 GET/POST  参数2:本次请求的路径 参数3:是否采用异步提交 99% true  
	xmlHttp.open("GET","/day45/ServletDemo01?name=tom&age=18",true);
    //3_利用Ajax核心对象发送请求
	xmlHttp.send();
}
</script>
</html>
3、POST方式HTML中的 js 代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试JS调用Ajax中的POST形式</title>
</head>
<body>
<button οnclick="fn()">按钮</button>
<input type="text" name="dd" id="tx"/>
</body>
<form action="" method="" enctype="application/x-www-form-urlencoded">

</form>

<script type="text/javascript">
//------------------------------此部分为固定格式-----------------------------------
function ajaxFunction()
{
var xmlHttp;

try
   {
  // Firefox, Opera 8.0+, Safari
   xmlHttp=new XMLHttpRequest();
   }
catch (e)
   {

 // Internet Explorer
  try
     {
     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
     }
  catch (e)
     {

     try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
     catch (e)
        {
        alert("您的浏览器不支持AJAX！");
        return false;
        }
     }
   }
   
   return xmlHttp;
}
//------------------------------此部分为固定格式-----------------------------------

function fn(){
	//测试Ajax
	//1_获取Ajax核心对象
	var xmlHttp=ajaxFunction();
	
	//5_为ajax核心对象设置一个回调函数
	//为xmlHttp绑定事件:当状态发生改变的时候触发一个事件
	xmlHttp.onreadystatechange=function(){
		//当xmlHttp的readyState属性值为4:服务端已经正常响应完毕
		if(xmlHttp.readyState==4){
			//当xmlHttp的status为200代表本次正常响应成功
			if(xmlHttp.status==200){
				//通过xmlHttp的responseText属性获取到服务端响应回的数据
				//alert(xmlHttp.responseText);
				document.getElementById("tx").value=xmlHttp.responseText;
			}
		}
	}
	
	//2_为Ajax核心对象绑定路径,参数 1:请求的方式 GET/POST  参数2:本次请求的路径 参数3:是否采用异步提交 99% true  
	xmlHttp.open("POST","/day45/ServletDemo01",true);
	//3 设置请求编码  , 设置请求时数据传递格式,默认字符串格式
	xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
    //4_利用Ajax核心对象发送请求
	xmlHttp.send("name=tom&age=18");
    
}
</script>
</html>
4、POST和GET方式的区别总结

利用JS 发送Ajax_post 比 get形式 多2个步骤：

         向服务端传递的参数放置在 xmlHttp.send("参数")；

         设置请求数据格式  xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");

三、利用JQuery进行Ajax请求   --   开发中最常用的方式

1、引入jquery文件


2、语法及参数含义

	$.get();
	$.get("");
	$.get("",{});  
	$.get("",{},function(dt){});
	$.get("",{},function(dt){},"json");
	
	参数1:字符串: 请求的路径
	参数2:JS对象  :发送的参数
	参数3:匿名函数 dt:dt存放着服务端响应回来的数据
	参数4:字符串 :希望服务端响应回来的数据格式
3、GET方式请求 

<title>Insert title here</title>
<script type="text/javascript" src="/day45/js/jquery-1.11.3.min.js"></script>
</head>
<body>
<button οnclick="fn()">按钮</button>
<input type="text" id="tx"/>
<script>
function fn(){

	$.get("/day45/ServletDemo01",{"name":"jack","age":18},function(dt){
		///代码....
		$("#tx").val(dt);
	});
	
}
</script>

</body>

4、POST方式请求

<title>Insert title here</title>
<script type="text/javascript" src="/day45/js/jquery-1.11.3.min.js"></script>
</head>
<body>
<button οnclick="fn()">按钮</button>
<input type="text" id="tx"/>
<script>
function fn(){
	
	$.post("/day45/ServletDemo01",{"name":"jack","age":18},function(dt){
		///代码....
		$("#tx").val(dt);
	});
	
}
</script>

</body>

	 $.ajax(
	{
		url:"${pageContext.request.contextPath}/ServletDemo01",
		data:"name=zhangsan",
		type:"post",//请求方式
		dataType:"json",//返回的数据类型
		success:function(d)
				{
					alert(d);
				},
		//发生错误时调用的方法
		error:function()
			  {
			    alert("响应失败了");
			  }
	})

四、JSON数据

1、什么是JSON

      JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式，就是说不同的编程语言JSON数据是一致的。

2、JSON的格式

      JSON对象格式：

                {"key"："value"，"key"："value"，.....} 

               键和值使用冒号分隔。

               标准规范要求key必须使用双引号，value如果没有使用双引号表示变量。

               例如：var user = {"username"："jack"，"password"："1234"};

      JSON数组格式：

               [ obj , obj , obj , ....]

               [  {"key"："value"，"key"："value"，.....}  ,  {"key"："value"，"key"："value"，.....}  ,  {"key"："value"，"key"："value"，.....}  , ....]

               一组JSON对象，对象之间用，号隔开

               例如：var data = [

                                                  {"id"："b001"，"title"："javaweb"，"price"："998"}，

                                                  {"id"："b002"，"title"："java 基础"，"price"："123"}，

                                                  {"id"："b003"，"title"："ssh"，"price"："250"}

                                            ]；


评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值