<span> 1</span> <span><span>DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
</span><span>></span>
<span> 2</span> <span><span>html</span><span>></span>
<span> 3</span> <span><span>head</span><span>></span>
<span> 4</span> <span><span>meta </span><span>http-equiv</span><span>=
"Content-Type"
</span><span> content</span><span>=
"text/html; charset=UTF-8"
</span><span>></span>
<span> 5</span> <span><span>title</span><span>></span>ajax应用实例<span></span><span>title</span><span>></span>
<span> 6</span>
<span> 7</span> <span><span>script </span><span>language</span><span>=
'javascript'
</span><span>></span>
<span> 8</span> <span>
var
</span><span> xmlHttp</span><span>=</span><span>null</span><span>;
</span><span> 9</span>
<span> 10</span> <span>
</span>
<span> 14</span> <span>
function
</span><span> GetXmlHttpRequest()
</span><span> 15</span> <span>{
</span><span> 16</span> <span>
var
</span><span> xmlHttp</span><span>=</span><span>null</span><span>;
</span><span> 17</span> <span>
</span>
<span> 22</span> <span>
try
</span>
<span> 23</span> <span> {
</span><span> 24</span> <span> xmlHttp </span><span>=</span> <span>
new
</span><span> XMLHttpRequest();</span><span>
<span> 25</span> <span> }
</span><span> 26</span> <span>
catch
</span><span>(e)
</span><span> 27</span> <span> {
</span><span> 28</span> <span>
try
</span><span>{
</span><span> 29</span> <span> xmlHttp </span><span>=</span> <span>
new
</span><span> ActiveXObject(</span><span>
"</span><span>Msxm12.XMLHTTP</span><span>"
</span><span>);</span><span>
<span> 30</span> <span> }
</span><span> 31</span> <span>
catch
</span><span>(e)
</span><span> 32</span> <span> {
</span><span> 33</span> <span>
try
</span><span>{
</span><span> 34</span> <span> xmlHttp </span><span>=</span> <span>
new
</span><span> ActiveXObject(</span><span>
"</span><span>Microsoft.XMLHTTP</span><span>"
</span><span>);
</span><span> 35</span> <span> }
</span><span> 36</span> <span>
catch
</span><span>(e)
</span><span> 37</span> <span> {
</span><span> 38</span> <span> xmlHttp </span><span>=</span> <span>false</span><span>;</span><span>
<span> 39</span> <span> }
</span><span> 40</span> <span> }
</span><span> 41</span> <span> }
</span><span> 42</span>
<span> 43</span> <span>
return
</span><span> xmlHttp; </span><span>
<span> 44</span> <span>}
</span><span> 45</span>
<span> 46</span> <span>
function
</span><span> sendRequest() </span><span>
<span> 47</span> <span>{
</span><span> 48</span> <span>
<span> 49</span> <span>
var
</span><span> prov_name </span><span>=</span><span> document.getElementById(</span><span>
"</span><span>province</span><span>"
</span><span>).value;
</span><span> 50</span>
<span> 51</span> <span>
if
</span><span>((prov_name </span><span>==</span> <span>null</span><span>) </span><span>||</span><span> (prov_name </span><span>==</span> <span>
""
</span><span>))
</span><span> 52</span> <span>
return
</span><span>;
</span><span> 53</span>
<span> 54</span> <span> xmlHttp </span><span>=</span><span> GetXmlHttpRequest();
</span><span> 55</span> <span>
if
</span><span>(xmlHttp </span><span>==</span> <span>null</span><span>)
</span><span> 56</span> <span> {
</span><span> 57</span> <span> alert(</span><span>
"</span><span>浏览器不支持XmlHttpRequest!</span><span>"
</span><span>);
</span><span> 58</span> <span>
return
</span><span>;
</span><span> 59</span> <span> }
</span><span> 60</span>
<span> 61</span> <span>
<span> 62</span> <span>
var
</span><span> url </span><span>=</span> <span>
"</span><span>ajax.php</span><span>"
</span><span>;
</span><span> 63</span> <span> url</span><span>=</span><span>url</span><span>+</span><span>
"</span><span>?prov=</span><span>"
</span><span>+</span><span>prov_name;
</span><span> 64</span>
<span> 65</span> <span> xmlHttp.open(</span><span>
"</span><span>GET</span><span>"
</span><span>,url,</span><span>true</span><span>);</span><span>
<span> 66</span> <span> xmlHttp.onreadystatechange </span><span>=</span><span> updatePage;</span><span>
<span> 67</span> <span> xmlHttp.send(</span><span>null</span><span>);</span><span>
<span> 68</span> <span>}
</span><span> 69</span>
<span> 70</span> <span>
function
</span><span> updatePage() </span><span>
<span> 71</span> <span>{ </span><span>
</span>
<span> 75</span> <span>
if
</span><span>(xmlHttp.readyState </span><span>==</span> <span>4</span> <span>&&</span><span> xmlHttp.status </span><span>==</span> <span>200</span><span>)
</span><span> 76</span> <span> {
</span><span> 77</span> <span>
var
</span><span> response </span><span>=</span><span> xmlHttp.responseText;</span><span>
<span> 78</span> <span> document.getElementById(</span><span>
"</span><span>city</span><span>"
</span><span>).innerHTML </span><span>=</span><span> response;</span><span>
<span> 79</span> <span> }
</span><span> 80</span> <span>}
</span><span> 81</span> <span></span><span>script</span><span>></span>
<span> 82</span>
<span> 83</span> <span></span><span>head</span><span>></span>
<span> 84</span>
<span> 85</span> <span><span>body</span><span>></span>
<span> 86</span> <span><span>h3</span><span>></span>请选择一个省(自治区):<span></span><span>h3</span><span>></span>
<span> 87</span>
<span> 88</span> <span><span>form </span><span>action</span><span>=
"ajax.php"
</span><span>></span>
<span> 89</span> <span><span>div</span><span>></span>
<span> 90</span> <span><span>select </span><span>id</span><span>=
"province"
</span><span> onchange</span><span>=
"sendRequest()"
</span><span>></span>
<span> 91</span> <span><span>option </span><span>value</span><span>=
""
</span><span>></span>请选择一个省(自治区)<span></span><span>option</span><span>></span>
<span> 92</span> <span><span>option </span><span>value</span><span>=
"ah"
</span><span>></span>安徽<span></span><span>option</span><span>></span>
<span> 93</span> <span><span>option </span><span>value</span><span>=
"fj"
</span><span>></span>福建<span></span><span>option</span><span>></span>
<span> 94</span> <span><span>option </span><span>value</span><span>=
"gs"
</span><span>></span>甘肃<span></span><span>option</span><span>></span>
<span> 95</span> <span><span>option </span><span>value</span><span>=
"gd"
</span><span>></span>广东<span></span><span>option</span><span>></span>
<span> 96</span> <span><span>option </span><span>value</span><span>=
"gx"
</span><span>></span>广西<span></span><span>option</span><span>></span>
<span> 97</span> <span><span>option </span><span>value</span><span>=
"gz"
</span><span>></span>贵州<span></span><span>option</span><span>></span>
<span> 98</span> <span><span>option </span><span>value</span><span>=
"hn"
</span><span>></span>海南<span></span><span>option</span><span>></span>
<span> 99</span> <span><span>option </span><span>value</span><span>=
"hb"
</span><span>></span>河北<span></span><span>option</span><span>></span>
<span>100</span> <span><span>option </span><span>value</span><span>=
"hh"
</span><span>></span>河南<span></span><span>option</span><span>></span>
<span>101</span> <span><span>option </span><span>value</span><span>=
"hl"
</span><span>></span>黑龙江<span></span><span>option</span><span>></span>
<span>102</span> <span></span><span>select</span><span>></span>
<span>103</span> <span></span><span>div</span><span>></span>
<span>104</span> <span></span><span>form</span><span>></span>
<span>105</span>
<span>106</span> <span><span>div </span><span>id</span><span>=
"city"
</span><span>></span>
<span>107</span> <span></span><span>div</span><span>></span>
<span>108</span>
<span>109</span> <span></span><span>body</span><span>></span>
<span>110</span> <span></span><span>html</span><span>></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>