コンセプト
Ajax技術は、ページを更新せずに、非同期にサーバから情報を取得するためのページを可能にします
アヤックスのコア技術は、XMLHttpRequestオブジェクト（XHR）であります
非同期コードは実際にはページの下の実行をブロックしないデータを要求されています
二 原生Ajax
1 XMRオブジェクトを作成します。
VaRのXHR =新しいXLMHttpRequest（）;
2オープン要求|要求を準備
xhr.open（パラメータ）
パラメータは次のとおりです。
リクエストタイプGET（コンテンツ要求アドレスは、スプライシングされました）
ポスト（非アドレス送信）
要求パスJS / data.json
パス後のリクエストは介して取得した場合？スプライシングパラメータ、パラメータおよび接続
同期、非同期falseに非同期の場合はtrueブール
デフォルトのトゥーレは非同期で実行されます
図3は、要求を送信します
xhr.send（）;
背景に転送されたデータを送信します
取得要求がnull（リクエストでリクエストパラメータのアドレス以降）
ポスト要求は、伝送パラメータを設定することができ、それがnullでない場合は
"は、uname = zhangsan＆upwd = 123" の形式で
注意：ポストを提出する前に、コードのアナログフォームの送信を追加
| xhr.setRequestHeader（ 'コンテンツタイプ'、 'アプリケーション/ x-www-form-urlencodedで'）。 |
図4は、に応じて決定されます
非同期リクエスト
1結合は、イベントをリッスンonreadystatechangeに
応答ステータスコード取得2 のreadyStateを、受信完了か否かを判断します
図4は、readyStateのに受信端を示します
応答結果の決意3
xhr.status 要求のための200が成功しました
要求経路404は存在しません
500サーバー内部の異常
4応答データをフェッチ
xhr.responseText データサーバ応答（フォーマットの可能性品種）
| XHR。onreadystatechangeに= 関数（）{ IF（xhr.readyState == 4）{ IF（xhr.statusの== 200）{ コンソールの.log（xhr.responseText）。 } } } |
同期要求はステータスコードを監視する必要はありません。
三原パッケージ生のAjax
図1は、呼び出し元のオブジェクトを定義します
リクエストタイプ非同期データは、情報の処理方法をアップロードするかどうかをアドレス要求
| たU1 = { 方法： "GET"、 URL： "JS / data.jsonキー= A＆のuname = zhangsan＆upwd = 12345？"、 非同期：真、 データ：{ uname： "zhangsan"、 upwd： "123456" }、 成功：機能（結果）{ console.log（結果）。 } }。 |
注：パラメータの結果は、AJAXコールバックデータに示されているデータ処理方法をもたらします。
データ処理方法のデータ処理結果を行います。
パッケージ2
コアは、XMLHttpRequestオブジェクトを作成します
コード：
| VAR XHR =新しいXMLHttpRequestを（）; |
フォーマットパラメータB
この手順では、変数に割り当てられ、コールのオブジェクトパラメータを除去した。主な内容であるトラバースと共にスプライシングさ
要求タイプ（大文字RPM）
リクエストアドレス（文字ステッチで要求を取得します）
非同期かどうか
（文字列に）情報をアップロード
データ処理方法
| PARAM = obj.dat持っています。 //パラメータ指定された書式文字列のためのJSONオブジェクト形式を変換 uname = zhangsan＆upwd = 12345 VARし、paramArray = []; //反復パラメータオブジェクト {（PARAMでVARキー）のために //ステッチパラメータ名と値 VAR PA =キー+ "=" + PARAM [キー]。 //配列にデータを追加 paramArray.push（PA）。 } //記号で指定された文字列に配列 VARのP = paramArray.join（ "＆"）; //ユーザーの要求タイプを取得 VAR法= obj.method.toUpperCase（）。 リクエストがスプライシング要求アドレスのリクエストパラメータの後ろに、GETの場合、//要求タイプが決定されます もし（方法== "GET"）{ 「？」;「？」でない場合は、使用//、モザイクを「＆」を使用したときに、もしそうならアドレスが含まかどうかを判断します obj.url + =（obj.url）.indexOf（ "？"）> -1？"＆" + P： "？" + P; } |
オープニング要求C
| xhr.open（方法、obj.url、obj.async）。 |
D要求が提出します
アナログフォームを追加し、後の方法の前に提出するよう要求を提出する前に、
コードを提出し、要求されたコンテンツは、ポスト提出プロセスに追加されます
| それはPOSTリクエストがある場合は、//、フォームの送信をシミュレートする必要があります IF（method.toUpperCase（）== "POST"）{ //アナログフォームの送信 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // post提交 xhr.send(p); } else { // get提交 xhr.send(null); } |
E 响应判断
分别对异步同步执行对应的流程
设置回调函数 调用传入的数据处理方法对服务端响应的数据进行处理
| 判断是否是否是异步请求 if (obj.async) { // 异步请求 // 监听readySate的值，判断响应是够完毕 xhr.onreadystatechange = function() { // 如果完全响应，值为4 if (xhr.readyState == 4){callback();} } } else { // 同步请求 callback(); } |
| // 回调函数 function callback() { // 判断是否响应成功 status=200 if (xhr.status == 200) { // 得到相应数据，并回调数据给调用者 var result = xhr.responseText; obj.success(result); } } |
三 通过JQuery使用Ajax
JQuery中封装了Ajax
调用格式
普通调用
$.ajax(参数); 参数为json对象
json对象的参数包括
{ type: "get", 或者”post”
url: "js/data.json", 目标地址
data:{ }, 传入的数据
dataType: "json" 服务器返回的数据类型
success:function(result){对result的操作代码}
}
以下为具体内容
type：请求方式 GET/POST
url：请求地址 url
async：是否异步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数
get调用
$.get(参数) 通过逗号分隔 省略key值
| $.get("js/data.json",{},function(data){console.log(data);}); |
post调用
$.post(参数) 通过逗号分隔 省略key值
| $.post("js/data.json",{},function(data){console.log(data);}); |
getJSON调用 属性通过逗号分隔 省略key值
| $.getJSON("js/data.json",{},function(data){console.log(data);}); |
跨域调用
两个域名,从一个域名访问另一个的域名 需要通过jsonp方式发送请求
条件 1远程接口支持跨域访问
2 ajax中设置dataType:"jsonp" [jsonp:’callback’]
| $.ajax({ type:"get", url:"http://iservice.itshsxt.com/restaurant/find", data:{ }, dataType:"jsonp", success:function(result){console.log(result);} }); |
三 eclipse中web项目的设置
调出server窗口
window菜单->show view ->other ->查找servers 选中打开窗口
创建server
右击new ->server -> 选中Apache下的Tomcat版本 next->
选择tomcat目录(选bin的父目录) 选中jdk next ->完成
启动tomcat测试
注意:Tomcat的默认接口8080,与oracle冲突,需要手动关oracle服务或改端口
创建web项目
文档框new选择other.查找web 选择Dynamic Web Project 设项目名一路确认
在tomcat上右击选择(add and move) 在左右选框中移动项目
web项目中webContent下创建页面和资源文件 webContent与src都相当于根目录
访问地址 localhost:端口号/项目名/(webContent下的直接目录)