 当前位置：文章中心 >> Jquery_Ajax_Javascript
|
|
AJAX编程实践之与服务器通信
|
|
夜鹰教程网 来源：www.yyjcw.com 日期：2016-11-27 11:51:32
|
|
这篇文章不能解决你的问题？我们还有相关视频教程云课堂 全套前端开发工程师培训课程 微信号：yyjcw10000 QQ：1416759661 远程协助需要加QQ！ 业务范围：视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程。 技术范围：全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。
|
首先看下看下相对简单些的--向服务器发送一个包含有名/值对的简单查询串，在这种情况下XHP即可以用GET也可以用POST。
GET
function doRequestUsingGET() {
createXMLHttpRequest();
var queryString = " GetAndPostExample? " ;
queryString = queryString + createQueryString()+ " &timeStamp= " + new Date().getTime();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open( " GET " , queryString, true );
xmlHttp.send( null );
}
POST
function doRequestUsingPOST() {
createXMLHttpRequest();
var url = " GetAndPostExample?timeStamp= " + new Date().getTime();
var queryString = createQueryString();
xmlHttp.open( " POST " , url, true );
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader( " Content-Type " , " application/x-www-form-urlencoded " );
xmlHttp.send(queryString);
} |
queryString就是名/值对的参数形式了（如name=LiLin&age=23）,在调用OPEN方法中，当请求方法是用POST的时候为了确保服务器知道请求体中有请求参数，需要调用setRequestHeader，将Content-Type值设置为application/x -www-form-urlencoded.当然也可不放在请求体中（那就不要用POST啦！）
此时server处理：
import java.io. * ;
import java.net. * ;
import javax.servlet. * ;
import javax.servlet.http. * ;
public class GetAndPostExample extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response, String method)
throws ServletException, IOException {
// Set content type of the response to text/xml
response.setContentType( " text/xml " );
// Get the user's input
String firstName = request.getParameter( " firstName " );
String middleName = request.getParameter( " middleName " );
String birthday = request.getParameter( " birthday " );
// Create the response text
String responseText = " Hello " + firstName + " " + middleName
+ " . Your birthday is " + birthday + " . "
+ " [Method: " + method + " ] " ;
// Write the response back to the browser
PrintWriter out = response.getWriter();
out.println(responseText);
// Close the writer
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Process the request in method processRequest
processRequest(request, response, " GET " );
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Process the request in method processRequest
processRequest(request, response, " POST " );
}
} |
对get and post方法都用processRequest来处理。
要向服务器发送相关复杂的查询串，可以将模型变化为XML发送到server 。
client端:
function createXML() {
var xml = " <pets> " ;
var options = document.getElementById( " petTypes " ).childNodes;
var option = null ;
for ( var i = 0 ; i < options.length; i ++ ) {
option = options[i];
if (option.selected) {
xml = xml + " <type> " + option.value + " <\/type> " ;
}
}
xml = xml + " <\/pets> " ;
return xml;
}
function sendPetTypes() {
createXMLHttpRequest();
var xml = createXML();
var url = " PostingXMLExample?timeStamp= " + new Date().getTime();
xmlHttp.open( " POST " , url, true );
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader( " Content-Type " , " application/x-www-form-urlencoded " );
xmlHttp.send(xml);
} |
createXML方法无非就是将内容以DOM的样式存到var xml（变量）里。有时也可能出现client直接将本地的一个XML文件直接以DOM（当然可以edit）的样式传送.(也放这个时个的Content -Type应该为text/xml了!)这时可能要用到ActiveXObject("MSXML2.DOMDocument.3.0")这样一个控件了。
|
|
 热门服务/教程目录
|
客服电话：153 9760 0032
购买教程QQ：1416759661
|
|
|