作者：汐玉Shining | 来源：互联网 | 2023-08-29 02:40
Ajax简介ajax异步JavaScript和XML。ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。我们知道，传统的网页（不使用ajax）如果需要更新内
Ajax简介
ajax = 异步 Javascript 和 XML。
ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。我们知道，传统的网页（不使用ajax）如果需要更新内容，必须重新加载整个网页。Ajax的出现，使得使网可以实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
注意：ajax本身不支持跨域请求，需要在服务器端处理。
工作原理
ajax的技术核心是 XMLHttpRequest 对象。
ajax请求过程：创建XMLHttpRequest、连接服务器、发送请求、服务器做出响应、接收响应数据
图示：
ajax与jsonp
区别
从实现方式上来讲，ajax是通过创建XMLHttpRequest来获取同源的数据。而jsonp是通过
jsonp产生原因
1. Ajax直接请求普通文件存在跨域无权限访问的问题（静态页、动态页、web服务、wcf只要是跨域请求一律不准）
2. web的页面上调用js文件是不受跨域的影响（凡拥有src属性的标签都拥有跨域能力script img iframe）
3. 可以判断 现在想通过纯web端(ActiveX控件、服务端代理、H5之Websocket等方式不算)跨域访问数据就只有一种可能，就是在远程服务器上设法把数据装进js格式的文件里，供客户度调用和进一步处理；
4. json的纯字符数格式可以简洁的描述复杂数据还被js原生支持
5. web客户端通过与调用脚本一样的方式来调用跨域服务器上动态生成的js格式文件(后缀.json)，服务器之所以要动态生成json文件目的把客户端需要的数据装入进去
6. 客户端在对json文件调用成功后获得自己所需的数据剩下的就按照自己需求进行处理和展现，这种获取远程数据的方式非常像ajax其实并一样
7. 为了方便客户端使用数据逐渐形成非正式传输协议jsonp
其实，说到ajax就会面临两个不可避免的问题，一是以何种格式来减缓数据；二是如何解决跨域问题。目前来说，所被推崇的方案是JSON作数据交换，JSONP来解决跨域问题。
JSON与JSONP虽然看上去只有一字之差，但是实际上根本不是一回事。JSON是一种key/value形式的数据格式，二JSONP则是一种跨域数据交互协议。
实例
题目：注册时，会要求输入用户名和密码，同时要验证用户名是否合法。
实现功能，用户在输入用户名后，需要给出提醒该名称是否已经存在。
html文档结构
<html>
<head>
<meta charset="utf-8">
<title>Ajax实例详解title>
head>
<body>
<div class="reg" style="margin-top: 50px;margin-left:100px;">
<p>注册页(ajax检测用户名是否合法)p>
<form name="Form">
用户名: <input type="text" name="Name" onblur="check()">
<span id="myDiv">span><br>
密 码: <input type="text" name="Password"><br>
<input type="button" value=" 提交" name="Btn" disabled="false">
form>
div>
body>
html>
Javascript代码
<script type="text/Javascript">
var xhr = null;
function CreatXHR()
{
if (window.ActiveXObject)
{
var arrXHR = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
var temp = arrXHR.length;
for (var i=0;i {
try
{
xhr = new ActiveXObject(arrXHR[i]);
break;
}
catch(ex)
{
}
}
}
else if(window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
}
function httpStateChange()
{
if (xhr.readyState==4)
{
if (xhr.status==200 || xhr.status==0)
{
var Names = xhr.responseText;
var arrName = Names.split(";");
var Flag = false;
for(i=0;i {
if (arrName[i]== Form.Name.value)
{
Flag = true;
break;
}
}
var OWarn = document.getElementById("Warn");
if (Flag)
{
OWarn.innerHTML = "您输入的用户名已存在，请重新输入！";
Form.Btn.disabled = true;
}
else
{
OWarn.innerHTML = "合法用户名";
Form.Btn.disabled = false;
}
}
}
}
function check()
{
CreatXHR();
if (xhr!=null)
{
xhr.Onreadystatechange= httpStateChange;
xhr.open("get","Readme.txt", true);
xhr.send(null);
}
else
{
alert("您的浏览器不支持XMLHTTP");
}
}
script>
注意
注意：需要在html同级目录下创建一个Reademe.text文件来存储已经存在的用户名，多个用户名之间用分好隔开。
效果图
原文：http://www.upyang.com/2017/07/12/ajax/
京公网安备 11010802041100号