[工学]第3讲 JS、jQuery、AJAX讲义.pptVIP

AJAX基础应用 XMLHttpRequest的创建 然后我们做的工作是设置一个回调函数. 接下来要做的工作是建立对服务器的调用。这里第一个参数表示http连接的方法, 一般我们使用“GET”或“POST”方式，两种方式的区别会在后面阐述。 第二个参数是服务器端地址，第三个参数表示是否采用异步方式进行传输，其中true表示采用异步方式 xmlhttp.onreadystatechange=callback; xmlhttp.open(GET,AJAXServer?name= + encodeURI(encodeURI(name)),true); AJAX基础应用 再接着就是向服务器端发送数据，这里由于已经在URL中包含了发送给服务器的数据，因此在send时就不需要参数了，后面会讲到对于POST模式，这里的使用方式会有不同 xmlhttp.send(null); AJAX基础应用 function callback(){ if(xmlhttp.readyState == 4){ if(xmlhttp.status == 200){ resultNode.innerHTML = xmlhttp.responseText; } else{ resultNode.innerHTML = 服务器故障; } } } 最后请注意，按照我们写代码的顺序来说，“xmlhttp.onreadystatechange=callback”这句中指定的回调函数callback实际上还没有存在，因此最后我们需要定义一下我们的回调函数做的工作 AJAX基础应用 这里readyState=4时表示服务器端的响应数据已经被全部接收，readyState还有其他状态，后面会进行详细介绍。 Status=200表示http连接状态正常，如果不是200，则表示http连接有误，此时回来的数据也不是我们需要的。 当响应数据全部接收并且http连接状态正确时，我们就可以接收响应的数据了，这里使用了xmlhttp.responseText用于以文本形式接收响应的数据，当然也可以用XML方式接收，后面会做详细介绍。 XMLHttpRequest的方法 方法 描述 abort() 停止当前请求 getAllResponseHeaders() 返回包含HTTP请求的所有响应头信息，其中响应头包括Content-Length,Date,URI等内容。 返回值是一个字符串，包含所有头信息，其中每一个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔 getResponseHeader(String header) 返回HTTP请求的响应头中指定的键名header对应的值 XMLHttpRequest的方法 方法 描述 open (String method,String url,boolean asynch,String username,String password) 建立对服务器的调用。 其中method表示HTTP调用方法。一般使用“GET”，“POST” url表示调用的服务器的地址 asynch表示是否采用异步方式，true表示异步 后两个参数可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码 send(content) 向服务器发出请求，如果采用异步方式，该方法会立即返回。 Content可以不指定，其内容可以是DOM对象，输入流或是字符串。 setRequestHeader(String header,String value) 设置HTTP请求中的指定首部header的值为value。 此方法需在open方法以后调用。 XMLHttpRequest的方法 属性 描述 onreadystatechange 请求状态改变的事件触发器（readyState变化时会调用此方法）。通常是一个javascript函数 readyState 请求状态 0=未初始化。 1=open方法成功调用以后。 2=服务器已经应答客户端的请求。 3=交互中。Http头信息已经接收，响应数据尚未接收。 4=完成。数据接收完成。 XMLHttpRequest的方法 属性 描述 responseText 服务器返回的文本内容 responseXML 服务器返回的兼容DOM的XML内容 status 服务器返回状态码。200表示“成功”，404表示“未找到” statusText 服务器返回状态码的文本信息。 GET和POST的区别 “GET”和“POST”的一个重要区别在于，“GET”方式传递给服务器的信息一般以后缀参数方式存在于