Ajax, JSON和JSONP是在网页开发中常用的技术。Ajax（Asynchronous JavaScript and XML）是一种用于前端的异步请求技术，可以实现在不刷新整个网页的情况下局部更新数据。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端数据传输。而JSONP（JSON with Padding）是一种跨域数据请求技术，用于解决Ajax请求受同源策略的限制。本文将介绍这三者的概念、用法和区别。

Ajax 的工作原理是通过XMLHttpRequest对象发送HTTP请求，接收服务器返回的数据，并通过JavaScript动态更新网页。举个例子，假设我们有一个电商网页，用户在网页上点击“加入购物车”按钮，页面不刷新的情况下，购物车图标的显示数量增加。使用Ajax，可以在用户点击按钮后，通过向服务器发送异步请求，将数据发送到后端，后端处理完成后返回结果到前端，前端再通过JavaScript在页面上更新购物车图标的显示数量。

function addToCart(productId) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/cart/add', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
updateCartIcon(response.amount);
} else {
alert('加入购物车失败，请重试！');
}
}
};
xhr.send(JSON.stringify({ id: productId }));
}

JSON是一种轻量级的数据格式，易于阅读和编写。它由键值对组成，使用大括号{}括起来。JavaScript中可以使用JSON对象来解析和生成JSON数据。举个例子，我们有一个学生信息的JSON数据：

{
"name": "张三",
"age": 20,
"major": "计算机科学",
"courses": ["数据结构", "算法", "数据库"]
}

我们可以使用JSON.parse()方法将JSON字符串解析成JavaScript对象，然后可以通过对象的属性来访问数据。

var jsonString = '{"name": "张三", "age": 20, "major": "计算机科学", "courses": ["数据结构", "算法", "数据库"]}';
var student = JSON.parse(jsonString);
console.log(student.name); // 输出 张三

JSONP用于解决Ajax请求受同源策略限制的问题。同源策略要求Ajax请求只能发送给同一域名下的服务器，不同域名之间的请求将被浏览器拦截。JSONP则是通过动态创建<script>标签，将请求参数放在URL中，利用script标签的跨域特性来实现请求的发送和数据的获取。

举个例子，假设我们的网页引用了一个外部的API，该API返回的数据格式为JSON。我们可以通过动态创建script标签，将API的URL带上请求参数，同时传入一个回调函数的名称作为参数。API服务器在返回数据时，将数据作为参数传递给回调函数，我们在回调函数中对数据进行处理和更新。

function handleApiResponse(data) {
console.log(data);
}
var script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleApiResponse';
document.body.appendChild(script);

需要注意的是，JSONP只支持GET请求，因为动态创建的<script>标签会自动发送GET请求。此外，使用JSONP时需要确保API服务器返回的数据格式正确，并且在返回数据时调用指定的回调函数。

总结来说，Ajax、JSON和JSONP是在网页开发中常用的技术。Ajax用于实现前后端数据的异步请求和更新，JSON用于数据的交换和传输，而JSONP则用于解决Ajax请求受同源策略的限制。通过使用这些技术，我们可以提升网页的用户体验，实现更灵活、动态的网页功能。