开发者学堂课程【高校精品课-上海交通大学 -互联网应用开发技术：Ajax&Json 1】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/76/detail/15762
Ajax&Json 1
内容介绍：
一、课程梗概
二、使用 Ajax 的原因
三、Ajax 实现异步的机制
四、原生的 Ajax 请求
五、案例
一、课程梗概
本节课继续学习 WEB 前后端之间的通信方式。以下为本节课的主要内容：
1、Ajax
Ajax 存在的必要性；原生的 Ajax请求（没有任何框架基础）；如何使用某种框架来写Ajax（如以j Query 为例学习如何实现前后端的沟通，就如在上节课做好的后端Servlet 的基础上，前端是如何与 Ajax 通信进行结合的）；由此过渡到 React ，学习React 与后端的框架之间是如何交互的，在这里，react与后端之间进行的是分离的工程，而在这个分离的工程里，引入了跨域问题的解决，进而学习跨域之后的前后端集成的例子。
在前后端交互时，如果使用 Ajax，也未必非要用 XML，尽管 Ajax 中的“x”指是“XML”，如今经常使用的是 Json。
其中跨域问题可以依靠 Fetch 来解决，当然也可以依靠其他的方式解决，但最常用的方式还是 Fetch，其更为简单一些，Fetch
2、JSON
首先是关于 JSON 如何处理的问题，处理 JSON 的工具非常多，在 Maven、Mvnrepostory 等网站可以查询到很多关于 JSON 的内容，如阿里的 fastjson 等，因此这里关于 JSON，我们不学习与具体的工具的接口绑定，而是学习其本身的属性，并通过一个案例了解前后端之间如何传输 JSON。
二、使用 Ajax 的原因
Ajax 强调的是异步，其与 HDB 请求不同。
后者在每次请求新页面时，页面都需要重新加载，换言之，我们现在看到的页面，会先刷新一下，在出现新的页面，在这个过程当中，无法执行其他的操作，只能等待其刷新。例如在浏览一个 Email 网页时，当用户进行刷新时，系统会重新加载其中所有的内容，包括用户已经浏览过的内容，如左边菜单栏，在整个内容全部重新加载的过程中，页面会阻塞，无法执行其他操作，因此效率会较低。
而对于 Ajax，所有浏览器都支持 XMLHttpRequest（XHR）使得浏览器在和服务器端交互时获得响应之后，不需要去重新加载整个页面，即不存在整个页面变成空白，再重新加载整个页面的过程。如在浏览页面的同时，发起修改一部分内容的请求之后，其在获取到响应数据之后，仅对请求中的相关内容进行修改，其他的内容则不需要进行重新的加载。就如邮件服务器里面的某邮件，在传统的页面中，如果是一个链接，点击链接时会重新加载整个页面，效率较低，而且有刷新页面的过程中，如果还有其他的链接或者要求填入某些信息，则无法进行点击正常编辑，但 Ajax 不同，其仅支持对指定的某部分进行更新，在点击时，首先会到后台获取数据，在其余的区域则可以继续输入，不发生阻塞以导致不必要的等待。并且在用户返回之后，响应数据返回，仅按照请求修改一小部分的内容。
三、Ajax 实现异步的机制
以下为该过程的示意图：
在前端需要有 JavaScript 脚本，Ajax 本身就是 JavaScript 的代码。当要发起某请求时，假设在页面上有某个按钮，点击按钮之后，即会触发调用 Ajax JavaScript 代码的动作，代码就会发起请求，且无需等待请求返回的结果，而是一旦浏览器收到返回的结果之后，会回调页面上的某一函数（callback）。在调用函数（可以是自行编写的函数）发起请求之后，在服务器端会进行一系列相应的操作，并返回数据，而在最初定义的时候，返回的是 XML 数据，而现在大部分是 Json 数据。当响应并返回 Json 数据之后，回调该函数，执行相应逻辑，如用返回的数据替换用户界面里的某一部分内容，当在替换时，可以看到整个页面只有要求替换的那一部分被刷新，而其他区域没有进行刷新，而且在从发起请求到数据刷新的整个阶段中，仍然可以在界面上执行其他的操作，如点击、填入等，而不会造成任何影响。
这样的机制最大的好处即在于异步。即发起请求之后，无需等待返回结果，再重新加载页面，而可以在整个过程当中继续在页面上进行操作。
如，在用户注册的页面，在该 register 页面中包含很多需要用户填写的内容，比如用户名、密码、性别等等，在很多网站，当用户输入用户名时，当输完用户名后可能会马上收到提示“该用户名已经被占用”，这个过程就是利用了 Ajax 的这种机制，当填完一部分内容转而去填写其他信息时，系统已经自行在后台页面通过 JavaScript 脚本向服务器端发出请求，服务器端使用用户输入的用户名做一次比对，返回之后，将后面文本进行替换，于是用户就会看到该提示语。而在这个过程当中，用户在输完用户名之后，虽然弹出该提示语的时间很短，但本质上并不影响用户继续输入其他信息，也就意味着在整个过程当中，不需要等页面刷新。否则，用户需要将信息全部填完，点击下方的 Submit 按钮，当点击按钮之后，系统才会将数据发到后台解析，解析完后才会返回提示“该用户名已经被占用”，用户需要重新填写全部信息，导致用户体验感降低。
总之，使用 Ajax 可以有效避免阻塞，此外，使用 Ajax 时页面的刷新仅为局部刷新，而非整体刷新，传递的只是要刷新的那一部分数据，而非完整的页面。这样，传递的数据量大大降低，通过脚本把一部分工作从原来服务器端转移到了客户端，从而实现了客户端的计算能力的充分利用，降低了服务器端的压力，因此，可以建议使用 Ajax的方式。
四、原生的 Ajax 请求
1、创建请求
在进行开发时，可以使用工具帮助解决问题，如果要用原生的 Ajax，则需要自行编写。原生的 Ajax 要依靠 XMLHttpRequest（XHR）对象进行操作，在大多数的浏览器中都以该名词命名：
var xmlhttp;
xmlhttp = new XMLHttpRequest();
在一些较为老的浏览器（IE5、IE6）中，其名称为 ActiveObject，且中国使用最多的操作系统 windows xp 使用的就是 IE 6浏览器，因此，即使对于老旧的浏览器也要进行学习。在开发的项目时可能要求必须支持 IE6，其中的名称就叫做 ActiveObject。
var xmlhttp;
xmlhttp = new ActiveObject(＂Microsoft.XMLHTTP＂);
在不同浏览器里面创建的对象存在差异，因此，在获取 Ajax 时，要先判断到底应该创建哪一种，应选择创建浏览器支持的 Ajax。
var xmlhttp;if(window . XMLHttpRequest) {xmlHttpRequest = new XMLHttpRequest();} else if(window. ActiveXObject) {xmlHttpRequest = new ActionXObject( "Microsoft .XMLHTTP");
}
2、发送请求到服务器端
创建好的请求仅是一个空的对象，需要将其发到服务器端，方法如下：
xmlhttp.open("GET", "test1.txt" ,true);
//说明请求的目的
xmlhttp. send();open(method, url, async)
//open的方法签名，其中包含三个参数 method: type of request, GET or POST
//发生请求的方式，包括 GET、POST、PUT、DELETE 等，即
xmlhttp 协议中规定的方法，大体上 get 对应读，post 对应写中的
create，put 对应 update，delete 对应删除，其含义在学习后面的
web service时会进行具体的学习，其中最常用的就是 GET 和 POST。
url: location of required file
//发送的请求的目的地，即该脚本在某个页面中，而页面属于某工程，它是相对于工程路径而言的一个概念。如，在热工程 localhost 中，其路径为locohost8080/text/.txt，也就是相对于工程的根目录。async: true or false
//表明是否是异步的，虽然 Ajax中的“A”已经说明是异步的，但是仍要在这个参数中进行确认。因为其在支持异步的同时也支持同步。在通常情况下，我们希望其支持异步了，即在请求发出之后，无需等待，在执行之后返回，再调用函数。因此，该参数的默认值是“true”，当然也可以将其设定为“False”（同步）。
//以上步骤表明目的是要在 "test1.txt"的位置上通过GET的方式发起异步请求，也就相当于发出了一个超链接，其返回的数据取决于后台的代码是如何处理的。后面我们会将前后台相对应地学习。当填好请求的内容之后，即会将请求发出。
send(string)
string: only used in POST
//send 还有一个另外重载的版本，即传出字符串，因为在 post 里可以带字符串形式的参数，后面会学习其具体的发送流程。
（1）关于 GET 和 POST：
①GET 是指“读”，仅是从服务器端获取数据，是非破坏性的操作，无论执行多少次，对服务器端都不会产生任何影响，但 GET 还会存在问题，它可能会对代码的更新有影响。其一，应用实际上是进入了 tomcat 中，因此在遇到问题时，首先需要解决tomcat 中的问题，也说在其部署的 app 里（tomcat web app）将部署目录删除并重新进行运行、部署，即保证 tomcat 中部署的是最新的；
其二，GET 请求一般的浏览器都会做缓存，因此可能会出现一些无法预期的行为，因此需要将浏览器中 cache 删除，即清除缓存，此外，浏览器都有强制刷新功能，可以对其进行强制刷新，强制刷新之后，浏览器就不会从缓存中直接读取，而是会到指定的url的链接处重新获取数据。但在不同的浏览器中强制刷新的操作方式不同，可以通过网页进行查询，如使用 Chrome、safari 等浏览具体如何操作。总之，GET 请求会进行缓存，可能户出现一些难以预料的问题，可以通过强制刷新来解决，前提是保证tomcat 部署信息是是最新的。
②POST：与 GET 不同，POST 具有破坏性，因为其对应的是“写”，也就是说会对服务器上的数据做出修改。例如，用户要下订单，订单数据实际上要写入到服务器端的数据库中，该操作会进行 POST。
而 POST 的执行次数则会影响请求的结果，因为在插入操作后再插入一次，系统就会报错。这一定也与 GET 存在区别。而在写 servlet 时没有对两者做出区别，是因为当时 POST 也只是为了得到服务器端的页面，而没有真正写入数据库。
（2）两者的调用
①调用 GET：
xmlHttpRequest . open("GET" , "GetUser" , true);
//对 GetUser 发送一个 GET 请求，若 GetUser 为对应的根目录，则收到请求的位置为 http://localhost:8080/GetUser。且该请求是异步的，即请求在发出之后不会阻塞，用户在等待页面上可以继续操作。xmlHttpRequest . onreadystatechange = ajaxCall;
//表明返回结果之后的操作，即当请求中的状态发生改变之后，回调，定义该函数名词为 ajaxCall（函数名可以随意编写），相当于告知浏览器，当请求发出、请求对象返回结果时，无论是对是错，只要是状态发生变化就调用该函数。
xmlHttpRequest . send();
此外，GET 也可以配置参数，如：xmlHttpRequest . open( "GET", "GetUser?id=1",true);
//在目录后用“？”表示参数，“=”表示参数值，即 GET 的是 id 为1的用户，由此实现通过请求传入参数，在服务器端如果写的是 servlet ，就可以把信息提取出来。服务器端在应对 Ajax 请求时，没有大的变化，与原来的写法几乎相同，但会发现其在返回时不是完整页面，而只是数据对象。在下节课中，也会学习使用spring controller 或 strut action 的处理方式，这节课中仍用 servlet 处理。
②调用 POST：
xmlHttpRequest . open("POST", "GetUser" , true);
//POST 也可以执行与 GET 类似的操作，如把指定 id 的用户传到后台xmlHttpRequest . setRequestHeader( "Content-type" ," application/x-www- form-urlencoded") ;
//在 POST 中可以设置请求头的内容，如请求的内容是某种格式的，该格式属于 Http协议的内容，意思是请求或响应中存放的内容的类型，包括多种类型。这一部分在课程中没有详细展开，因为其内容较多，且一般情况下也无需特别关注。xmlHttpRequest . onreadystatechange = ajaxCall;
//在返回结果后调用 ajaxCall 函数
xmlHttpRequest. send("id=" + id);
//POST 的参数是写在 send 方法中的。上面我们提到过 send 的重载版本，即传入字符串，该字符串就是在传入其参数。
（3）函数
这里使用与以上不同的另外一种写法：
xmlhttp.onreadystatechange=function(){
//不直接调用 ajaxcall 函数，而是直接定义了匿名的 function 函
数，用来判断状态（readyState）是否发生改变
if (xmlhttp.readyState==4 && xmlhttp.status==200)
//如果对于状态的判断结果为“4”则表示已经完成，但无法说明其是正常完成还是错误完成；还可以判断系统的响应，正确返回值为“200”，通常来说，我们只会处理这一类，表示完成且正确完成，因为其对应的是 http 请求中的返回码，“200”表示“ok”，“404”表示没有页面，“500”表示服务器内部错误等。仅处理正确完成的页面，但是若处于异常状态，又出于不想让用户看到乱码异常信息的考虑，则可以把404或500情况进行处理，从而提高用户的体验感。在返回值为200的情况下，该请求会获取到响应文本，当相应文本中对应的返回值为4或200时，返回后把请求对象上响应文本提取出来，这个相应文本实际上是后台的 server 在接受到请求之后返回回来的值。 {document.getElementById("myDiv").innerHTML=xmlhttp.
responseText;
//在获取到响应文件之后，就要对当前页面做处理，假设当前页面中有一个有 Div ，将其 id 设置为myDiv，并将其中的文本内容替换成 xmlhttp.responseText，于是页面原本空白的区域显示返回的结果。}
}
除了 responseText 对象之外，还可以返回 responsexml ，前者形式为字符串，后者的形式为 xml ，
xmlDoc=xmlHttpRequest.responseXML;txt="";x=xmlDoc.getElementsByTagName("username");for(i=0;i{txt=txt+x[i].childNodes[0].nodeValue+" />";
}document.getElementById("myDiv").innerHTML=txt;
由于 XML 目前使用的频率较低，因此代码不再做细致的说明。
以上是通过 GET 或 POST 方法得到响应，并刷新页面的过程。
五、案例
1、案例讲解
（1）前端
写一个完整的页面：Index.html
Index.htmlDemo
//以上为一些脚本等原生的数据，对于下面的内容基本无影响var xmlHttpRequest = null;
//创建对象function ajaxRequest() {
//定义函数 ajaxRequestif(window.ActiveXObject) {xmlHttpRequest=new ActionXObject("Microsoft.
XMLHTTP");
}
else if(window.XMLHttpRequest) {xmlHttpRequest = new XMLHttpRequest( );
//为防止不同的浏览器对 Ajax 请求的支持不同，保证创建的是该浏览器支持的对象，并为对象 xmlHttpRequest 赋值，要注意的此时仅是对函数进行了定义，还未被调用。
}
//可以选用 GET 或 POST 的方法调用：
//GET:
if(xmlHttpRequest! = null) {var id =document.getElementById("id").value;
//如果 xmlHttpRequest 不为空，即正常地获取到了数据，接下来将页面中元素id对应的值取出，结合后面的代码“User id...”，即取出名为 id 的 input 的输入框中的内容
xmlHttpRequest.open("GET","GetUser?id="+id,true);
//对后台发出"GetUser?id="+id的请求
xmlHttpRequest.onreadystatechange=ajaxCall;
//返回后调用 ajaxCall 函数xmlHttpRequest.send();//POST:xmlHttpRequest . open( "POST" , "GetUser" , true);
//发出"GetUser"请求xmlHttpRequest.setRequestHeader( "Content-type" , "application/ x-www-form- urlencoded");
//设置请求头的内容类型xmlHttpRequest . onreadystatechange = ajaxCall;
//返回结果后调用 ajaxCall 函数
xmlHttpRequest. send("id=" + id);
//传入 id 参数}
}
这两种方式都可以，再次说明 ajaxCall 函数可以自由命名，其仅是为了实现操作间的关联即可。
function ajaxCall() { if( xmlHttpRequest . readyState == 4 ) {if(xmlHttpRequest .status == 200) {var text = xmlHttpRequest . responseText ;
//该函数判断状态为4且返回码为200时，
取出响应的文本内容。document. getElementById ( "myDiv") .inner
HTML ="
"+text+"
";
//结合下面的代码可知， mydiv 是由 h2编写的内容，这里将 mydiv 的内容替换为"
" + text + "
"，且内容来自于服务器。}
}
}
Let AJAX change this text
User id:
//有一个需要用户输入 id 的 input ，该输入的 id 名即为上面取出的值，该 input 最初没有值。
//以上所有的函数均只进行了定义，还未被调用
//此处页面对应部分应有一行字以及一个按钮，当点击 button 按钮时，调用ajaxRequest()函数，该函数首先创造了 ajax 请求，并发出"GetUser?id="+id请求，最终会获取到输入的用户信息并返回，然后调用 ajaxCall 函数替换掉 mydiv 中 h2编写的一行内容，连同点击相应的按钮，这一部分属于前台的操作。但这里替换的内容数据则来自于后台。Query
（2）后台 Servlet
后台 Servlet 的编写与之前学习的方法基本相同：
package user;
@WebServlet("/GetUser")public class UserServlet extends HttpServlet {
//UserServlet 响应/GetUser 请求，与前面的代码相对应private static final long serialVersionUID = 189253777748894
13L;
@Resource(name="jdbc/sample")
DataSource ds;
//用户信息取自于数据库protected void processRequest (HttpServletRequest request , HttpServletResponse response)
//无论是执行 doGet，抑或 doPost ，都会调用 processRequest 方法
//将请求包装到 HttpServletRequest request 对象中，
并产生空的 response，接下来就要在其中写入内容throws ServletException, IOException {PrintWriter out = response . getWriter();
//首先要获取 response 中的 Writer 才能写入内容System. out . println(" doGet invoked! ");
//并在页面上显示“doGet invoked!”之前的课程中提到过若代码运行后得到的不是预期结果时，有两种处理方法，其一为使用 debug 模式运行代码，其二是在程序中的易出错点反复输出，在代码运行时可根据输出结果（在@...的大段代码中寻找异常，并寻找代码中抛出该异常的具体代码）大致定位到错误点。该过程与最基础的程序设计中的debug过程相同。 try {String id = (String) request . getParameter("id");
//从 request 中获取参数，该参数与前面的 id、id=+id 参数相匹配，只要执行getParameter 就可以从请求中提取该参数
Connection con = ds . getConnection();PreparedStatement ps = con. prepareStatement ("SELECT * FROM tbl_user WHERE id = ?");ps .setString(1, id);
//操作数据库得到的结果即为从数据库里面获取的用户的信息。
ResultSet rs = ps.executeQuery();
rs.last();int count = rs. getRow();if ( count== 0) {out . println("no such user");
//如果查询结果为0，则在 response 中写入“no such user”，其中的 out 来自于response。} else {String s = "username:" + rs . getString(2) +"email:" + rs. getString(2); out. println(s);
//如若按要求查询到了用户，则对其信息组件一个字符串，包括从数据库中获取的username 和 email，并将整个字符串写入 response。
//if else 该段代码说明在 response 中写入的是“no such user”字符串或s字符串，但不管如何，写入的不是 html ，这与之前学习的 servlet 写入的内容完全不同，其只写纯数据字符串，而不是 html，不含有相应的 html 标签，传输的数据量就会非常小
}
out. flush();
//其他代码都相同，写完之后 out flush 发走
} catch(Exception e) {e . printStackTrace();
}
finally {out.close();
//无论该过程正常结束或异常结束，最终都将其关掉，用户就会接收到响应。有了关于用户在浏览器 s 或 no such user 的字符串，将其从 responseText 中提取出来替换页面原本的内容
}
}
2、案例演示
在实际运行时，代码基本相同，但要注意在使用以上代码运行时，一定要选择性地注释掉 GET 或 POST，课堂上的案例以注释 POST，单独开放 GET 为例。不同于以上代码的一点是，在案例演示过程中参数传入的代码略有不同，改为了：
PreparedStatement ps = con. prepareStatement ( "SELECT * FR
M user WHERE username = ?");
即用“用户名”代替了“用户ID”，更为直观。因此，在查询时输入的信息的用户名，如“Caocao”，点击 Query，最上面一行文字由“Let AJAX change this text”替换为“username:Caocao role:CEO”，再输入“Liubei”,最上方的文字刷新为“username:Liubei role:BIGBROTHER”。同时在用户信息搜索框下方还有一条提示，如输入 a 就会出现一些首字母为A的用户信息的提示。
此次便实现了前后台的一次交互，且获取的数据确实来自于后台数据库。
3、数据库的操作
在这里，我们再单独学习关于数据库的操作，这里的数据库操作并未使用之前学习过的 IO 映射，而是直接连接 Java 数据库的 JDBC 数据库的连接。
@Resource(name="jdbc/sample")
DataSource ds;
首先需要一个 DataSource，这是 Java 企业版中的自带的一个对象，从而抽象地表示一个数据库。而对于数据库本身，我们只对它作了声明，而没有对其进行定义、赋值，直接在数据库上 getConnection（获取连接），在正常情况下，只声明不定义是无法正常运行的，可能是一个 null 。在其前面添加的 @Resource 是 Java 企业版规定的 anolocation，其在部署到 Tomcat 中时会对其进行初始化。
这个过程依靠的是代码 jdbc/sample。对于 Ajax 数据库中的用户信息表 User，数据库里没有关于 sample 的内容，但却可以访问 Ajax 数据库，这是我们主要学习的问题。而对于下面获取了连接之后，执行带有参数的语句，这部分内容分在上节课的jdbc 读取的部分通用没有讲，因为其内容位于编程的底层，可以选择性忽略，有兴趣可以去学习上节课的课件。
ResultSet rs = ps.executeQuery();
rs.last();int count = rs. getRow();
这段代码展示执行 Query 之后，对于助兴结果进行遍历，获取其行数。
if ( count== 0) {out . println("no such user");
} else { String s = "username:" + rs . getString(2) +"email:" + rs. getString(2);
}
out. println(s);
该段代码表示，如果获取结果显示为“0”，表示其为空，即没有该用户；若不是“0”，即获取关于用户的信息。
而关于@Resource(name="jdbc/sample")之所以可以访问Ajax数据库，是因为其内部包含一个 Context.xml 文件:
//资源名称为 jdbc/sampleauth="Containertype="javax. sql.DataSource"
//类型为数据源maxActive="100"maxIdle="30"maxWait= "10000"username= "root "//用户名password="reins2011 !"//密码driverClassName=" com.mysql.jdbc.Driver"//驱动类url="jdbc:mysql://localhost:3306/ajax"/>
//真正的数据库源
该 Context 文件在META-INF目录下，在部署整个应用时 Tomcat 会读取到该文件，然后根据其中的描述创建对数据库的抽象，复制给 ds，DataSource 就有了对象可以直接操作。
在本节课中，重点在于并未为 response 写入完整的页面，而是只写入了数据，这是从后台角度可以体会到的 Ajax 的好处。现在前台和后台之间的数据传递量会下降，而不需要完整的 XML，这与之前的课程中 Servlet 在 out 中写入的内容差异。
5、Asyn 属性
（1）Asyn-true
该属性在默认情况下为 true 处，也就是说在发送请求时默认不要等待，当有请求响应返回时，直接调用函数即可，而该函数会在请求返回后被激活，去做相应的处理，即异步通信。
（2）Asyn-false
也可以等待请求返回，这样在请求发出之后，程序会发生阻塞，无法进行其他操作，直到方法返回为止，再执行下面的代码，且代码与该属性为 true 时的代码是等效，相当于同步通信。
因此，大多数情况下，我们将属性设置为 true。因此，在复制使用课上的代码时，需要按需求设置。若选择 GET 方法，就要将 POST 方法注释，若选择 Asyn 属性为true，就要将 FALSE 的代码注释，也可以分别尝试，观察不同的运行效果。当然，不同的方案运行结果相同，都可以查询到存在于数据库中的目标用户。对于目标用户的过滤是靠 Hintservlet 实现的。
总之，Ajax 可以实现异步通信的同时，也不排斥同步通信。当然在实际应用中我们大多选择其异步通信的功能，因为只有异步才不会发生阻塞。
6、回调函数
（1）编写
观察回调函数，可以发现其形式基本上都是 if....，...，似乎如果要写回调函数，无论是哪个 ajax 请求，只有操作部分略有差异，而其他部分几乎相同，为了避免这种模糊混淆，还有另一种写法，该写法类似于C++中函数指针，如下：
var xmIhttp;
function loadXMLDoc(url, cfunc)
//写一个通用的方法 loadXMLDoc，其中包括 url 和 cfunc 两个函数
{
if (window. XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//获取请求xmlhttp. onreadystatechange= cfunc ;xmlhttp.open("GET" ,url, true);xmlhttp. send();
//对 url 发出一个 GET 请求，其返回后就去调用函数
}
（2）使用
function myFunction(){ loadXMLDoc("/ajax/test1. txt", function()
//对/ajax/test1. txt发起一个请求 loadXMLDoc，返回后调用
function()函数{if (xmlhttp. readyState==4 && xmlhttp. status== 200)
{document . getE lementById( " myDiv"). innerHTML=
xmlhttp. responseText;
}
});
}
//定义该匿名函数 function()，将其当作第二个函数发出
Let AJAX change this text
Change Content
我们也可以将创建请求、发送请求及返回后回调函数的代码写成模板，都可以写成loadXMLDoc 函数用来传递不同的内容来执行 Ajax 的调用。
这种框架包括 Query、Fetch 等等，将与 Ajax 调用相关的内容进行封装，也可以对代码进行改写。
