<1> url 默认为当前页地址
<2> dataType 可用类型：
（如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递）
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息。
script：返回纯文本JavaScript代码。
json：返回json数据。
jsonp：(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
text：返回纯文本字符串。
<3> type 可用类型主要为post和get两种（默认为get）
get：从指定的资源请求数据（从服务器读取数据）
post：向指定的资源提交要被处理的数据（向服务器提交数据）
<4> async 异步方式
默认为true，即异步方式。当设置为false时，为同步方式。
异步方式：ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发ajax里的success方法，这时候执行的是两个线程。
同步方式：在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
<5> data 请求的数据
{ }中可以填入多项数据。如果不填（一般为get请求），则读取对应地址的全部数据，此时可以在console中通过console.log(res)显示数据情况。
<6> success 和 error 两个函数 一般需要设置，方便确定请求是否成功，以及请求成功后的提示或是对数据的处理和显示。
位置：HTMLStudy--ajaxtest.jsp <!-- 1.页面上输入一个地址，点击获取经纬度，弹出该地址的经纬度。 --> <!-- 2.伪造的ajax：点击加载网页 --> <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <!-- CSS部分 --> <style type="text/css"> .button{ width: 100px; height: 29px; font-size: 16px; color: white; background-color: black; padding: 0; vertical-align: top; border: 0; } .textbox{ height: 25px; padding: 0; vertical-align: top; } span{ font-size: 16px; height: 29px; line-height: 29px; } </style> </head> <body> <!-- javascript部分 --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> function showAdress() { var str = document.getElementById("text").value; $.ajax ({ url: "https://restapi.amap.com/v3/geocode/geo", dataType: "json", type: "get", //data表示请求到的数据 data: { address: str, key: "7486e10d3ca83a934438176cf941df0c", //此处的key值是从此地址请求数据所需的，为data数据中的一项 }, success:function(data){ alert(data.geocodes[0].formatted_address+"经纬度："+data.geocodes[0].location); //谷歌地图解析 console.log(data); //在console中查看数据 }, error:function(){ alert('failed!'); }, }); } </script> <script type="text/javascript"> window.onload = function (){ var mydate = new Date(); document.getElementById("currentTime").innerText = mydate.getTime(); } function loadPage (){ var targeturl = document.getElementById("url").value; console.log("targeturl"); document.getElementById("iframePosition").src = targeturl; } </script> <!-- html部分 --> <h2>1.点击获取经纬度</h2> <div> <form name="form"> <span>输入地址：</span><input id="text" class="textbox" type="text"/> <input class="button" type="button" value="获取经纬度" onclick="showAdress()"/> </form> </div> <h2>2.加载网页</h2> <div> <p>要加载的网页连接：<span id="currentTime"></span></p> <p> <input type="text" id="url" value="https://www.baidu.com/"> <input type="button" id="button" value="提交" onclick="loadPage()"> </p> </div> <div> <h3>加载页面：</h3> <iframe style="500px;height:500px" id="iframePosition" src=""> </iframe> </div> </body> </html>
结果如下：
参考链接：jQuery的Ajax实例（附完整代码）