今回はネイティブajaxとカプセル化されたajaxの使い方(コード付き)をお届けします。ネイティブajaxとカプセル化されたajaxを使用する際の注意事項は何ですか?実際のケースを見てみましょう。
Ajax をテストするバックエンド インターフェイスの作成方法がわからない場合は、ノード環境を使用してバックエンド インターフェイスをシミュレートできます。
1. バックエンド インターフェイスをシミュレートするには、Web サイト開発の小さな例を参照して、コマンド ラインに npm install Express --save と入力して、Express をインストールします。ミドルウェア 。


2. app.js の内容を
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | var express= require ('express');
var app=express();
app.engine('html', require ('ejs').express);
app.set('view engine','html');
var service= require ('./webService/service.js');
app. use ('/ public ',express. static (' public '));
app.get('/', function (req,res){
res.render('index');
});
app.get('/ajax/index', function (req,res){
res.send(service.get_index_data());
});
app. use ( function (req,res,next){
var err= new Error('this page Not found');
err.status=404;
next(err);
});
app.listen(3003);
|
ログイン後にコピー
3.
りー
4.index.htmlコンテンツ
1 2 3 | {
"items" : "Express 是一个自身功能极简,完全是由路由和中间件构成一个的 web 开发框架:从本质上来说,一个 Express 应用就是在调用各种中间件。中间件(Middleware) 是一个函数,它可以访问请求对象(request object (req)), 响应对象(response object (res)), 和 web 应用中处于请求-响应循环流程中的中间件,一般被命名为 next 的变量。"
}
|
ログイン後にコピー
5.html構造
1 2 3 4 5 6 7 8 | .content-box{
width: 400px;
}
#text{
padding: 0px 10px;
width: 400px;
height: 300px;
}
|
ログイン後にコピー
6. ネイティブの ajax 記述方法
1 2 3 4 5 | <h3>这是一段不变的内容这是一段不变的内容这是一段不变的内容</h3>
<p class = "content-box" >
<textarea id= "text" >如果要让用户留在当前页面中,同时发出新的HTTP请求,就必须用JavaScript发送这个新请求,接收到数据后,再用JavaScript更新页面,这样一来,用户就感觉自己仍然停留在当前页面,但是数据却可以不断地更新。</textarea>
</p>
<button id= "btnchange" >换一换</button>
|
ログイン後にコピー
またはjQueryの書き方
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | window.onload= function (){
function clickbtn(){
var request;
if (window.XMLHttpRequest){
request= new XMLHttpRequest();
} else {
request= new ActiveXObject('Microsoft.XMLHTTP');
}
request.open('GET','/ajax/index',true);
request.onreadystatechange= function (){
if (request.readyState===4){
if (request.status===200){
var text=request.responseText;
document.getElementById('text').value=text;
} else {
var err=fail(response.status);
alert(err);
}
} else {
}
}
request.send();
}
document.getElementById('btnchange').onclick=clickbtn;
}
|
ログイン後にコピー

1 2 3 4 5 6 7 8 9 10 11 12 | $(document).ready( function (){
$('#btnchange').click( function (){
$.ajax({
type: "GET" ,
url: "/ajax/index" ,
datatype: "json" ,
success: function (data){
$('#text').val(data);
}
});
});
});
|
ログイン後にコピー

この事例を読んだ後、あなたはその方法をマスターしたと思います記事、詳細 php 中国語 Web サイトの他の関連記事にもご注目ください。 
推奨読書:
Formフォーム送信を実装するAjaxメソッド
HTTPメッセージとAjaxの基礎知識を詳しく解説
以上がネイティブ Ajax とカプセル化された Ajax の使用方法 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。