【精讲】jQuery中Ajax的使用，$.ajax，$.get，$.post，$.getJSON，serialize()

一、简述js、jQuery、Ajax关系       

       一切为更加便捷而生，为懒人而生。

       首先，介绍下JavaScript、jQuery、原生态的Ajax、jQuery中的Ajax之间的关系，理清里面的关系后，更易于学习。

       JavaScript是动态网页技术，也是原生态的。jQuery是JavaScript查询(Query)语言,相当于升级版的JavaScript，简化了动态网页的开发，用最少的代码做最多的事，达到了事半功倍的效果。Ajax是一种浏览器通过js的异步发送请求，局部更新页面的技术。原生态的Ajax是通过XMLHttpRequest对象的方法和属性对页面内容进行局部更新，但是编程人员又觉着原生态的Ajax代码繁多，于是开发出了jQuery中内嵌的Ajax技术，还是传承了jQuery的特点，使用最少的代码做最多的事，于是jQuery中功能强大而代码简洁的Ajax出现了。

二、介绍jQuery中的Ajax请求

     现在我们主要介绍开发中常见的Ajax请求

    ①$.ajax方法，方法中的参数如下： 

1、url：表示请求的地址，更新页面处理更新的服务器地址是什么？具体是浏览器请求服务器的地址，比如http://localhost:8080/工程名/servlet-mapping中的url-pattern（服务器）,相当于原生态Ajax中的open（method,url，true/false）中的url

2、type：表示请求的类型是GET和POST请求，相当于原生态Ajax中的open（method,url，true/false）中的method

3、data：表示发送服务器的数据，一般是Servlet类中的service()方法，data的格式有两种：<1>name-value <2>{key:value}

4、success：请求成功，响应回调函数，也就是服务器响应给浏览器的内容，相当于原生态Ajax中的onreadystatechange事件

5、dataType:响应的数据类型，常用的数据类型：text表示纯文本；xml表示xml中的数据；json表示json对象

   jQuery代码示例： 

  注意:回调函数中的参数就是data，服务器响应的数据

                $.ajax({
						//请求的地址
						url:"http://localhost:8080/testAjax/ajaxServlet",
						//发送请求的数据
						//name=value&value=name
						// {key:value}
						data:"action=jQueryAjax",//open(Method,URL,true)中的url中后面的参数?action=jQueryAjax
						//请求的类型Get请求和Post请求,原生态是open(Method,URL,true);
						type:"GET",
						//请求成功，响应的回调函数,在原生态的时候我们通过的是XMLHttpRequest.ResponseText来获取的。
						success:function (data) {

							// 在html上显示该函数，首先将字符串的值转换为json对象，然后从json对象中取值
							// var jsonData = JSON.parse(data);
							$("#msg").html("编号是" + data.id + "姓名是" + data.name);
						},
						//响应的数据类型,相当于服务器响应的数据类型，原生态是responseText,responseXML
						// text表示纯文本，xml表示xml数据，json表示json对象
						dataType:"json"
					});

②$.get方法，因为本身就是GET请求，所以少了一个参数，具体方法中的参数如下：

1、url：表示请求的地址，更新页面处理更新的服务器地址是什么？具体是浏览器请求服务器的地址，比如http://localhost:8080/工程名/servlet-mapping中的url-pattern（服务器）,相当于原生态Ajax中的open（method,url，true/false）中的url

2、type：返回内容格式，xml, html, script, json, text, _default。注意和$.ajax的type区别，内容不一样

3、data：表示发送服务器的数据，一般是Servlet类中的service()方法，data的格式有两种：<1>name-value <2>{key:value}

4、callback：请求成功，响应回调函数，也就是服务器响应给浏览器的内容，相当于原生态Ajax中的onreadystatechange事件

 jQuery代码示例：没有了键值对的形式

  注意:回调函数中的参数就是data，服务器响应的数据

$.get(
      "http://localhost:8080/testAjax/ajaxServlet",
      "action=jQueryGet",
      function (data) {
		                 $("#msg").html("get的编号是" +data.id + "get的姓名是" + data.name );
					  },
      "json");

③$.post方法，因为本身就是POST请求，所以少了一个参数，具体方法中的参数如下:

1、url：表示请求的地址，更新页面处理更新的服务器地址是什么？具体是浏览器请求服务器的地址，比如http://localhost:8080/工程名/servlet-mapping中的url-pattern（服务器）,相当于原生态Ajax中的open（method,url，true/false）中的url

2、type：返回内容格式，xml, html, script, json, text, _default。注意和$.ajax的type区别，内容不一样

3、data：表示发送服务器的数据，一般是Servlet类中的service()方法，data的格式有两种：<1>name-value <2>{key:value}

4、callback：请求成功，响应回调函数，也就是服务器响应给浏览器的内容，相当于原生态Ajax中的onreadystatechange事件

 jQuery代码示例：没有了键值对的形式

  注意:回调函数中的参数就是data，服务器响应的数据

$.post(
      "http://localhost:8080/testAjax/ajaxServlet",
      "action=jQueryGet",
      function (data) {
		                 $("#msg").html("get的编号是" +data.id + "get的姓名是" + data.name );
					  },
      "json");

④$.getJSON方法，因为本身就是GET请求和json格式，具体方法中的参数如下:

1、url：表示请求的地址，更新页面处理更新的服务器地址是什么？具体是浏览器请求服务器的地址，比如http://localhost:8080/工程名/servlet-mapping中的url-pattern（服务器）,相当于原生态Ajax中的open（method,url，true/false）中的url

2、data：表示发送服务器的数据，一般是Servlet类中的service()方法，data的格式有两种：<1>name-value <2>{key:value}

3、callback：请求成功，响应回调函数，也就是服务器响应给浏览器的内容，相当于原生态Ajax中的onreadystatechange事件

 jQuery代码示例：

$.getJSON("http://localhost:8080/testAjax/ajaxServlet",
          "action=jQueryJSON",
          function (data) {
						$("#msg").html("ID" + data.id + "name " + data.name);
					});

⑤表单序列化serialize()

serialize()可以把表单中的内容都获取到，并以name=value&name=value的形式进行拼接

1、url：表示请求的地址，更新页面处理更新的服务器地址是什么？具体是浏览器请求服务器的地址，比如http://localhost:8080/工程名/servlet-mapping中的url-pattern（服务器）,相当于原生态Ajax中的open（method,url，true/false）中的url

2、data：表示发送服务器的数据，一般是Servlet类中的service()方法，data的格式有两种：<1>name-value <2>{key:value}

3、callback：请求成功，响应回调函数，也就是服务器响应给浏览器的内容，相当于原生态Ajax中的onreadystatechange事件

 jQuery代码示例：

 注意：,"action=jQuerySerialize&" + $("#form01").serialize()，在url的位置需要添加&+再加上获取表单的数据

$.getJSON("http://localhost:8080/testAjax/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
						$("#msg").html("serialize is" + data.id + "the name is" + data.name);
					});

三、总结

1. Ajax的主要结束了，发现用心真的不难
2. 有时候发现这个东西真的挺有趣
3. 多总结，多思考，多动手，我离技术大佬又进了一步，哈哈哈
4. 现在JDK17就要出来了，感觉自己学的和更新的完全追不上啊
5. 坚持。