在現代的web開發中，javascript和ajax已經成為前端開發不可或缺的一部分。javascript可以為網頁添加豐富的交互效果，而ajax則可以使網頁實現異步刷新，同時也減輕了服務器的負擔。本文就來探究一下javascript與html ajax的作用和應用。

javascript的作用及應用

javascript是一種運行在客戶端的腳本語言，能夠在網頁中實現一些動態的效果，常見的如表單驗證、輪播圖、彈窗、導航菜單等。javascript能夠操作DOM（文檔對象模型）和CSS（層疊樣式表），從而更加方便地控制網頁的呈現效果。

//舉個例子
//給按鈕添加點擊事件
var btn = document.getElementById("btn");
btn.onclick = function() {
alert("你點擊了按鈕");
}

上述代碼就是javascript的示例，它將id為btn的按鈕添加了一個點擊事件，當按鈕被點擊時，頁面會彈出一個提示框，內容是“你點擊了按鈕”。

html ajax的作用及應用

ajax（Asynchronous JavaScript and XML）是一種基于javascript和XML（可擴展標記語言）的技術，能夠使網頁實現異步刷新，而不需要重新加載整個頁面，從而提高了用戶體驗。ajax可以通過XMLHttpRequest對象與服務器進行數據交互，可以發送請求并接收響應。

//舉個例子
//使用ajax獲取天氣信息
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.weather.com?city=shanghai", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var weather = JSON.parse(xhr.responseText);
document.getElementById("weather").innerHTML = weather.city + "今天的天氣是" + weather.weather;
}
};
xhr.send();

上述代碼就是html ajax的示例，它使用ajax獲取了天氣API的數據，并將獲取到的數據展示在頁面上。通過ajax的異步方式，用戶無需等待整個頁面加載，就能夠獲取所需的信息。

javascript和html ajax的結合應用

javascript與html ajax可以結合使用，實現更加豐富的效果。常見的應用場景有：表單的異步提交、頁面的局部刷新、無限滾動等。

//舉個例子
//使用ajax實現無限滾動
var pageNum = 1;
var loading = false;
$(window).scroll(function() {
var screenHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
docHeight = $(document).height();
if (scrollTop + screenHeight >= docHeight && !loading) {
loading = true;
$.ajax({
url: "http://api.news.com?page=" + pageNum,
dataType: "json",
success: function(news) {
news.forEach(function(item) {
$("#newsList").append("<li>" + item.title + "</li>");
});
pageNum++;
loading = false;
}
});
}
});

上述代碼是javascript和html ajax的結合應用示例，它使用ajax實現了無限滾動的效果。當頁面滾動到底部時，會通過ajax獲取新的新聞數據，并將新聞數據展示在頁面上。

總結

javascript和html ajax是前端開發中不可或缺的技術。javascript可以為網頁添加交互效果，ajax可以使網頁實現異步刷新。兩者結合使用，能夠實現更加豐富的效果，提高用戶體驗。