从零开始学习WEB前端之数据交互(Ajax)

版权声明:本文为博主原创文章,转载请注明地址。如果文中有什么纰漏或错误的话,请留言指正,我会及时更正。如果您觉得本文还不错的话,记得点个赞呦,希望能帮到你,谢谢。 https://blog.csdn.net/yuzhiqiang_1993/article/details/70159122

所谓的数据交互其实就是前端与服务端之间的数据传递。
比如我们注册用户。在点击注册按钮的时候,实际上是浏览器通过http请求把我们输入的用户名,密码之类的数据传递给服务器,服务器接收到数据后存到数据库并返回给我们一些信息,我们根据返回的信息做下一步的处理。

本篇博客的服务端是php,使用javaweb的同学可以看JavaWeb之Ajax

服务器##

服务器也就是我们常说的服务端(后端),顾名思义是提供某种服务的。
服务器的类型有很多
比如:文件服务器、数据库服务器、邮件服务器、Web 服务器等。
而我们最常打交道就是web服务器
web 服务器:Apache、Nginx、IIS、Tomcat、NodeJS等;
服务端开发的语言有:java,php,.net等等
对于服务端我们了解即可。不管用什么语言开发,最终返回给我们的都是html、css、js等数据。

HTTP协议(非常重要)

超文本传输协议。是用于从WWW服务器传输超文本到本地浏览器的传输协议,Http协议是很重要的知识点,一定要详细的看一看。
组成:
从客户端发送的http请求(request)
从服务端返回的响应(response)

HTTP是无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。

HTTP是媒体独立的:这意味着,只要客户端和服务器知道如何处理的数据内容,任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。

HTTP是无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。

http请求(request)
主要有三个组成部分:请求行,请求头,请求主体

请求行

  • 请求方法
  • 请求地址(url)
  • 协议版本

请求方法(所有方法全为大写)有多种:
GET 请求获取Request-URI所标识的资源(常用)
POST 在Request-URI所标识的资源后附加新的数据(常用)
HEAD 请求获取由Request-URI所标识的资源的响应消息报头
PUT 请求服务器存储一个资源,并用Request-URI作为其标识
DELETE 请求服务器删除Request-URI所标识的资源
TRACE 请求服务器回送收到的请求信息,主要用于测试或诊断
CONNECT 保留将来使用
OPTIONS 请求查询服务器的性能,或者查询与资源相关的选项和需求

请求头
http是个无状态的协议,所以,需要在请求头和响应头中包括自身的一些信息和想要执行的动作,这样,对方在收到信息后,就可以知道你是谁,你想干什么。

User-Agent:浏览器的具体类型  如:User-Agent:Mozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/20100101 Firefox/17.0

Accept:浏览器支持哪些数据类型  如:Accept: text/html,application/xhtml+xml,application/xml;q=0.9;

Accept-Charset:浏览器采用的是哪种编码  如:Accept-Charset: ISO-8859-1

Accept-Encoding:浏览器支持解码的数据压缩格式  如:Accept-Encoding: gzip, deflate

Accept-Language:浏览器的语言环境  如:Accept-Language zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3

Host:请求的主机名,允许多个域名同处一个IP地址,即虚拟主机。Host:www.baidu.com

Connection:表示是否需要持久连接。Keep-Alive/close,HTTP1.1默认是持久连接,它可以利用持久连接的优点,当页面包含多个元素时(例如Applet,图片),显著地减少下载所需要的时间。要实现这一点,Servlet需要在应答中发送一个Content-Length头,最简单的实现方法是:先把内容写入ByteArrayOutputStream,然后在正式写出内容之前计算它的大小。如:Connection: Keep-Alive

Content-Length:表示请求消息正文的长度。对于POST请求来说Content-Length必须出现。

Content-Type:WEB服务器告诉浏览器自己响应的对象的类型和字符集。例如:Content-Type: text/html; charset='gb2312'

Content-Encoding:WEB服务器表明自己使用了什么压缩方法(gzip,deflate)压缩响应中的对象。例如:Content-Encoding:gzip

Content-Language:WEB服务器告诉浏览器自己响应的对象的语言。

Cookie:最常用的请求头,浏览器每次都会将cookie发送到服务器上,允许服务器在客户端存储少量数据。

Referer:包含一个URL,用户从该URL代表的页面出发访问当前请求的页面。服务器能知道你是从哪个页面过来的。Referer: http://www.baidu.com/

请求体
提交给服务器的数据(可能为空)

这里写图片描述

这里写图片描述

http响应
三个组成部分:状态行,响应头,响应主体

状态行

  • 协议版本
  • http状态码
  • 描述

http状态码
状态代码有三位数字组成,第一个数字定义了响应的类别,共分五种类别:

1xx:指示信息–表示请求已接收,继续处理
2xx:成功–表示请求已被成功接收、理解、接受
3xx:重定向–要完成请求必须进行更进一步的操作
4xx:客户端错误–请求有语法错误或请求无法实现
5xx:服务器端错误–服务器未能实现合法的请求

常见状态码:

200 OK                        //客户端请求成功
400 Bad Request               //客户端请求有语法错误,不能被服务器所理解
401 Unauthorized              //请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用 
403 Forbidden                 //服务器收到请求,但是拒绝提供服务
404 Not Found                 //请求资源不存在,eg:输入了错误的URL
500 Internal Server Error     //服务器发生不可预期的错误
503 Server Unavailable        //服务器当前不能处理客户端的请求,一段时间后可能恢复正常

响应头

Allow	
服务器支持哪些请求方法(如GET、POST等)。
Content-Encoding	
文档的编码(Encode)方法。只有在解码之后才可以得到Content-Type头指定的内容类型。利用gzip压缩文档能够显著地减少HTML文档的下载时间。Java的GZIPOutputStream可以很方便地进行gzip压缩,但只有Unix上的Netscape和Windows上的IE 4、IE 5才支持它。因此,Servlet应该通过查看Accept-Encoding头(即request.getHeader("Accept-Encoding"))检查浏览器是否支持gzip,为支持gzip的浏览器返回经gzip压缩的HTML页面,为其他浏览器返回普通页面。
Content-Length	
表示内容长度。只有当浏览器使用持久HTTP连接时才需要这个数据。如果你想要利用持久连接的优势,可以把输出文档写入 ByteArrayOutputStream,完成后查看其大小,然后把该值放入Content-Length头,最后通过byteArrayStream.writeTo(response.getOutputStream()发送内容。
Content-Type	
表示后面的文档属于什么MIME类型。Servlet默认为text/plain,但通常需要显式地指定为text/html。由于经常要设置Content-Type,因此HttpServletResponse提供了一个专用的方法setContentType。
Date	
当前的GMT时间。你可以用setDateHeader来设置这个头以避免转换时间格式的麻烦。
Expires	
应该在什么时候认为文档已经过期,从而不再缓存它?
Last-Modified	
文档的最后改动时间。客户可以通过If-Modified-Since请求头提供一个日期,该请求将被视为一个条件GET,只有改动时间迟于指定时间的文档才会返回,否则返回一个304(Not Modified)状态。Last-Modified也可用setDateHeader方法来设置。
Location	
表示客户应当到哪里去提取文档。Location通常不是直接设置的,而是通过HttpServletResponse的sendRedirect方法,该方法同时设置状态代码为302。
Refresh	
表示浏览器应该在多少时间之后刷新文档,以秒计。除了刷新当前文档之外,你还可以通过setHeader("Refresh", "5; URL=http://host/path")让浏览器读取指定的页面。 
注意这种功能通常是通过设置HTML页面HEAD区的<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://host/path">实现,这是因为,自动刷新或重定向对于那些不能使用CGI或Servlet的HTML编写者十分重要。但是,对于Servlet来说,直接设置Refresh头更加方便。 

注意Refresh的意义是"N秒之后刷新本页面或访问指定页面",而不是"每隔N秒刷新本页面或访问指定页面"。因此,连续刷新要求每次都发送一个Refresh头,而发送204状态代码则可以阻止浏览器继续刷新,不管是使用Refresh头还是<META HTTP-EQUIV="Refresh" ...>。 

注意Refresh头不属于HTTP 1.1正式规范的一部分,而是一个扩展,但Netscape和IE都支持它。
Server	
服务器名字。Servlet一般不设置这个值,而是由Web服务器自己设置。
Set-Cookie	
设置和页面关联的Cookie。Servlet不应使用response.setHeader("Set-Cookie", ...),而是应使用HttpServletResponse提供的专用方法addCookie。参见下文有关Cookie设置的讨论。
WWW-Authenticate	
客户应该在Authorization头中提供什么类型的授权信息?在包含401(Unauthorized)状态行的应答中这个头是必需的。例如,response.setHeader("WWW-Authenticate", "BASIC realm=\"executives\"")。 
注意Servlet一般不进行这方面的处理,而是让Web服务器的专门机制来控制受密码保护页面的访问(例如.htaccess)。

响应实体
返回的数据

这里写图片描述

通过表单提交数据
模拟提交用户名和密码

html代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		

	</head>
	<body>
		
	<form action="login.php" method="post">
		
		user:<input type="text" name="user" value="" />
		pwd:<input type="password" name="pwd"  value="" />
		
		<input type="submit" value="提交"/>
	</form>
	</body>
</html>

php代码

<?php
	header('content-type:text/html; charset= utf-8');
	echo '过来的登录名是:'.$_POST['user'];
	echo '<br>';
	echo '传过来的密码是'.$_POST['pwd'];
?>

这里写图片描述

Ajax

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础。我们通过这个对象去发送请求

所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法:
variable=new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
variable=new ActiveXObject(“Microsoft.XMLHTTP”);

兼容写法:

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

发送ajax请求
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)

send(string)
将请求发送到服务器。
string:仅用于 POST 请求

普通get请求

xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send()

带参数的get请求

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

普通的post请求

xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

带参数的post请求
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

readyState	
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status	200: "OK"
404: 未找到页面

当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
   
    }
  }

响应

如需获得来自服务器的响应,使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性来获取返回的数据。
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

Ajax请求
完成一个Ajax请求大致分为以下几个步骤:

  • 创建XMLHttpRequest对象
  • 注册回调函数
  • 设置与服务端交互的基本信息(请求方式,请求地址,是否异步);
  • 发送请求
  • 在注册的回调函数中,获取返回的数据,更新界面

示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<script>
			window.onload = function() {
				var btn = document.querySelector("button");
				btn.onclick = function() {
					var ajax;

					/*1.创建XMLHttpRequest对象*/
					if(window.XMLHttpRequest) {
						//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
						ajax = new XMLHttpRequest();
					} else {
						// IE6, IE5 浏览器执行代码
						ajax = new ActiveXObject("Microsoft.XMLHTTP");
					}

					/*设置请求方式和地址  默认是异步*/
					ajax.open("GET", "changeTitle.php");
					/*发送请求*/
					ajax.send();

					/*注册回调函数*/
					ajax.onreadystatechange = function() {
						if(ajax.readyState == 4 && ajax.status == 200) {
							document.querySelector("h1").innerHTML = ajax.responseText;
						}
					}
				}
			}
		</script>
	</head>

	<body>

		<h1>aj`这里写代码片`ax请求</h1>

		<button>ajax请求</button>
	</body>

</html>

php代码:

<?php
	
	header('content-type:text/html; charset= utf-8');
	echo "我是通过ajax请求返回的数据!"

?>

这里写图片描述

从上图可以看出,ajax请求并没有刷新页面。

给服务器传参数

get请求
在open()方法中直接将参数拼接上去
post请求需要先设置请求头,然后在send()方法中添加参数

示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<script type="text/javascript">
			window.onload = function() {
				document.querySelector("#btn").onclick = function() {
					var xmlHttp;
					if(window.XMLHttpRequest) {
						xmlHttp = new XMLHttpRequest();

					} else {
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
					}
					var userName = document.querySelector("#userName").value;
//					xmlHttp.open("GET", "showParameter.php?userName=" + userName);
//					xmlHttp.send();
					xmlHttp.open("POST", "showParameter.php");
					xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
					xmlHttp.send("userName="+ userName);

					xmlHttp.onreadystatechange = function() {
						if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
							document.querySelector("h1").innerHTML = xmlHttp.responseText;
						}
					}
				}

			}
		</script>

	</head>

	<body>

		<h1></h1>
		<input type="text" id="userName" placeholder="输入用户名" />

		<input type="button" id="btn" value="提交" />
	</body>

</html>

php代码:

<?php
	
	header('content-type:text/html; charset= utf-8');
	//echo $_GET["userName"];
	echo $_POST["userName"];
?>

这里写图片描述


解析返回的json数据
JSON(JavaScript Object Notation),是ECMAScript的子集,作用是进行数据的交换,而且由于语法更为简洁,网络传输,以及机器解析都更为迅速.

语法规则:

  • 数据在键值对中
  • 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组

数据类型:

  • 数字(整数或浮点数)
  • 字符串(在双引号中)
  • 逻辑值(true 或 false)
  • 数组(在方括号中)
  • 对象(在花括号中)
  • null
// 对象
{
  "name":"yzq",
  "age":"23",
  "sex":"true",
 
}

// 数组 
[
  {
      "name":"yzq",
      "age":"16"
  },
  {
      "name":"yuzhiqiang",
      "age":"23"
  }
]

json字符串与json对象的转换

**JSON.parse()**方法:将JSON字符串转化为JavaScript对象
**JSON.stringify()**方法:将JavaScript对象,转化为JSON字符串
由于老式IE(8以下)浏览器中没有JSON对象,通过导入JSON2.js框架即可解决,框架获取地址为:JSON2.js

示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<script>
			window.onload = function() {
				document.querySelector("button").onclick = function() {

					var xmlHttp;
					if(window.XMLHttpRequest) {
						xmlHttp = new XMLHttpRequest
					} else {
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
					}
					xmlHttp.open("GET", "json.php");
					xmlHttp.send();
					xmlHttp.onreadystatechange = function() {
						if(this.readyState == 4 && this.status == 200) {
							/*将json字符串转换为js对象*/
							var per = JSON.parse(xmlHttp.responseText);
							var p=document.querySelectorAll("p");
							p[0].innerHTML = "姓名:" + per.name + "年龄:" + per.age;
							/*将js对象转换为json字符串*/
							p[1].innerHTML=JSON.stringify(per);
						}
					}
				}
			}
		</script>
	</head>

	<body>

		<button>获取json数据</button>
		<p></p>
		<p></p>
	</body>

</html>

php代码:

<?php
	/*json_decode将json字符兑换转换为对象
	 json_encode将php对象转换为json字符串
	 * */
	
	
	header("Content-Type:text/html;charset=utf-8");
    // json字符串
//  $jsonStr = '{"name":"yzq","age":23,"}';
//  // 字符串转化为 php对象
//  print_r(json_decode($jsonStr));

     // php数组
    $arrayName = array('name' =>'yuzhiqiang' ,'age' => 18 );
      // php对象 转化为 json字符串
      print_r(json_encode($arrayName));

?>

这里写图片描述

ajax工具类封装

function ajax(option) {
  // 创建对象
  var xmlRequest ;
  if (XMLHttpRequest) {
      xmlRequest = new XMLHttpRequest();
  }else{
      xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");

  }

  // 格式化传入的数据为name=fox&age=18这样的格式
  var formatStr = "";
  for(var item in option.data){
      // 获取属性名,属性值,进行拼接
      formatStr+=item;// 属性名
      formatStr+="=";//等号
      formatStr+=option.data[item];//属性值
      formatStr+="&";//分隔符
  }

  // 去除最后一个&
  formatStr = formatStr.slice(0,-1);

  // open方法 如果是get方法,那么url之后需要添加数据
  if(option.method == "get"){
      option.url = option.url+"?"+formatStr;
      option.data = null;
  }
  // 调用open方法
  xmlRequest.open(option.method,option.url)

  // 如果是post设置HTTP协议头
  if (option.method=="post") {
      xmlRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  }

  // send方法 这里的data已经是修改过的,如果使用的是get方法,那么data为null
      xmlRequest.send(option.data);

  // 判断状态改变,调用方法
  xmlRequest.onreadystatechange = function () {
  // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
             option.success();  
     } 
  };
}

Jquery中的Ajax

jquery也给我们提供的ajax方法供我们使用,兼容性较好且功能更强大。

在jquery中
GET - 从指定的资源请求数据。
POST - 向指定的资源提交要被处理的数据。


jQuery $.get() 方法

语法:
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。

示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<script type="text/javascript" src="jquery-3.2.0.js"></script>

		<script type="text/javascript">
			$(function() {
				$("button").eq(0).on("click", function() {
					$.get("json.php", function(data) {
						console.log(data);
					})
				})
			});
		</script>
	</head>

	<body>
		<h1></h1>
		<button>$get</button>
	</body>

</html>

php代码

<?php
	/*json_decode将json字符兑换转换为对象
	 json_encode将php对象转换为json字符串
	 * */
	
	
	header("Content-Type:text/html;charset=utf-8");
    // json字符串
//  $jsonStr = '{"name":"yzq","age":23,"}';
//  // 字符串转化为 php对象
//  print_r(json_decode($jsonStr));

     // php数组
    $arrayName = array('name' =>'yuzhiqiang' ,'age' => 18 );
      // php对象 转化为 json字符串
      print_r(json_encode($arrayName));

?>

这里写图片描述

jQuery $.post() 方法

语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<script type="text/javascript" src="jquery-3.2.0.js"></script>

		<script>
			$(function() {
				$("#btn").on("click", function() {

					$.post("showParameter.php", {
						userName: $("#userName").val()
					}, function(data, status) {

						$("h1").eq(0).html(data);
						console.log(data);
						console.log(status);
					});
				});
			});
		</script>
	</head>

	<body>

		<h1></h1>
		<input type="text" id="userName" placeholder="输入用户名" />

		<input type="button" id="btn" value="提交" />
	</body>

</html>

php代码

<?php
	
	header('content-type:text/html; charset= utf-8');
	//echo $_GET["userName"];
	echo $_POST["userName"];
?>

这里写图片描述

**Jquery .ajax().ajax()方法** `.ajax()方法相比于前面的方法,拥有更为自由的定制性,可以替换.get(),.get(),.post()`方法 接收的参数是一个对象,我们可以指定很多请求设置。

async					布尔值,表示请求是否异步处理。默认是 true。
beforeSend(xhr)			发送请求前运行的函数。
cache					布尔值,表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status)	请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。
contentType				发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。
context					为所有 AJAX 相关的回调函数规定 "this" 值。
data					规定要发送到服务器的数据。
dataFilter(data,type)	用于处理 XMLHttpRequest 原始响应数据的函数。
dataType				预期的服务器响应的数据类型。
error(xhr,status,error)	如果请求失败要运行的函数。
global					布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified				布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp					在一个 jsonp 中重写回调函数的字符串。
jsonpCallback			在一个 jsonp 中规定回调函数的名称。
password				规定在 HTTP 访问认证请求中使用的密码。
processData				布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset			规定请求的字符集。
success(result,status,xhr)	当请求成功时运行的函数。
timeout					设置本地的请求超时时间(以毫秒计)。
traditional				布尔值,规定是否使用参数序列化的传统样式。
type					规定请求的类型(GET 或 POST)。
url						规定发送请求的 URL。默认是当前页面。
username				规定在 HTTP 访问认证请求中使用的用户名。
xhr						用于创建 XMLHttpRequest 对象的函数。

示例:

$.ajax({
        url:'01.php',//请求地址
        data:'name=fox&age=18',//发送的数据
        type:'GET',//请求的方式
        success:function (argument) {},// 请求成功执行的方法
        beforeSend:function (argument) {},// 在发送请求之前调用,可以做一些验证之类的处理
        error:function (argument) {console.log(argument);},//请求失败调用
    })

格式化表单
我们在向服务器提交数据时,如果使用的是Ajax需要手动将数据格式化name=fox&age=18类似这样的格式,JQuery已经帮助我封装好了一个格式化数据的方法
$(selector).serialize()
可以将form中拥有name属性的表单元素的字,进行格式化。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<script src="jquery-3.2.0.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			$(function() {
				$("#btn").on("click", function() {
					/*格式化表单*/
					var param = $("#loginForm").serialize();
					alert(param);

				});
			})
		</script>
	</head>

	<body>

		<form id="loginForm">
			用户名:<input type="text" name="user" />
			<br /> 密码:
			<input type="password" name="pwd" />

		</form>

		<button id="btn">提交</button>
	</body>

</html>

这里写图片描述

跨域请求
跨域是指 不同域名之间相互访问,由于安全原因,跨域访问是被各大浏览器所默认禁止的。
例如我想拿到聚合网站中的数据,默认请求是发不出去的。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-3.2.0.js"></script>

		<script>
			$(function() {
				$("button").eq(0).on("click", function() {
					$.ajax({
						type: "get",
						url: "http://v.juhe.cn/toutiao/index?type=keji&key=4c52313fc9247e5b4176aed5ddd56ad7",
						async: true,
						success: function(data) {
							console.log(data);
						}
					});

				});
			});
		</script>
	</head>

	<body>

		<button>请求聚合数据</button>
	</body>

</html>

这里写图片描述

有图片可以看出,当我们点击按钮请求数据的时候给我们报了个错,大致意思就是不允许访问。那我们如果才能访问的到呢?

JSONP
JSON with Padding其本质是利用了<script src=""></script>标签具有可跨域的特性,由服务端返回一个预先定义好的Javascript函数的调用,并且将服务器数据以该函数参数的形式传递过来,此方法需要前后端配合完成。

而**jQuery 的$.ajax()**方法当中集成了JSONP的实现,可以非常方便的实现跨域数据的访问。
dataType: ‘jsonp’ 设置dataType值为jsonp即开启跨域访问
jsonp 可以指定服务端接收的参数的“key”值,默认为callback
jsonpCallback 可以指定相应的回调函数,默认自动生成

示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-3.2.0.js"></script>

		<script>
			$(function() {
				$("button").eq(0).on("click", function() {
					$.ajax({
						type: "get",
						url: "http://v.juhe.cn/toutiao/index?type=keji&key=4c52313fc9247e5b4176aed5ddd56ad7",
						dataType: "jsonp",
						success: function(data) {
							console.log(data);
						}
					});

				});
			});
		</script>
	</head>

	<body>

		<button>请求聚合数据</button>
	</body>

</html>

这里写图片描述

如果你觉得本文对你有帮助,麻烦动动手指顶一下,算是对本文的一个认可。也可以关注我web前端的博客专栏,我会不定期的更新,如果文中有什么错误的地方,还望指正,谢谢!

没有更多推荐了,返回首页