Ajax 请求

文章目录

  • 简介
  • 原生AJAX请求
  • jQuery 中的 AJAX 请求

简介

  • AJAX 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发
    技术。(不是一种编程语言)
  • ajax 是一种浏览器通过 js 异步发起请求,局部更新页面的技术。
  • Ajax 请求的局部更新,浏览器地址栏不会发生变化,局部更新不会舍弃原来页面的内容。
  • 在2005年,Google通过其Google Suggest使 AJAX变得流行起来。(Google Suggest能够自动帮您完成搜索单词)
  • Google Suggest使用 AJAX创造出动态性极强的 web界面:当您在谷歌的搜索框输入关键字时,JavaScript会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。

原生AJAX请求

原生 AJAX 请求的示例:

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title heretitle>
		<script type="text/javascript">
			// 在这里使用 javaScript 语言发起 Ajax 请求,访问服务器 AjaxServlet 中 javaScriptAjax
			function ajaxRequest() {
				// 1 、我们首先要创建 XMLHttpRequest
				var xmlhttprequest = new XMLHttpRequest();
				// 2 、调用 open 方法设置请求参数
				xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true)
				// 4 、在 send 方法前绑定 onreadystatechange 事件,处理请求完成后的操作。
				xmlhttprequest.onreadystatechange = function(){
					if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
						var jsonObj = JSON.parse(xmlhttprequest.responseText);
						// 把响应的数据显示在页面上
						document.getElementById("div01").innerHTML = " 编号:" + jsonObj.id + " , 姓名:" + jsonObj.name;
					}
				}
			// 3 、调用 send 方法发送请求
			xmlhttprequest.send();
			}
	script>
head>
<body>
<button onclick="ajaxRequest()">ajax requestbutton>
<div id="div01">
div>
body>
html>

jQuery 中的 AJAX 请求

$.ajax 方法

主要参数如下:

url 	表示请求的地址
type 	表示请求的类型 GET 或 POST 请求
data		表示发送给服务器的数据
格式有两种:
	一:name=value&name=value
	二:{key:value}
success		请求成功,响应的回调函数
dataType	响应的数据类型
			常用的数据类型有:
				text 表示纯文本
				xml 表示 xml 数据
				json 表示 json 对象

示例:

$("#ajaxBtn").click(function(){
	$.ajax({
		url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
		// data:"action=jQueryAjax",
		data:{action:"jQueryAjax"},
		type:"GET",
		success:function (data) {
			// alert(" 服务器返回的数据是: " + data);
			// var jsonObj = JSON.parse(data);
			$("#msg").html(" 编号:" + data.id + " , 姓名:" + data.name);
		},
		dataType : "json"
	});
});

$.get方法和$.post 方法,参数如下:

url 			请求的 url 地址
data 			发送的数据
callback 		成功的回调函数
type 			返回的数据类型

示例:

// ajax--get 请求
$("#getBtn").click(function(){
	$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function 	(data) {
		$("#msg").html(" get 编号:" + data.id + " , 姓名:" + data.name);
	},"json");
});
// ajax--post 请求
$("#postBtn").click(function(){
	$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function 	  (data){
		$("#msg").html(" post 编号:" + data.id + " , 姓名:" + data.name);
	},"json");
});

$.getJSON 方法,参数如下:

url 				请求的 url 地址
data 				发送给服务器的数据
callback 			成功的回调函数

示例:

// ajax--getJson 请求
$("#getJSONBtn").click(function(){
	    $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function
	(data) {
		$("#msg").html(" getJSON 编号:" + data.id + " , 姓名:" + data.name);
	});
});

表单序列化 serialize()

serialize()方法可以把表单中所有表单项的内容都获取到,并以 name=value&name=value 的形式进行拼接。

// ajax 请求
$("#submit").click(function(){
	// 把参数序列化
	$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" +
	$("#form01").serialize(),function (data) {
		$("#msg").html(" Serialize 编号:" + data.id + " , 姓名:" + data.name);
	});
});

你可能感兴趣的:(ajax)