通常，ajax用于请求数据和加载库(框架)。也许只是也许使用了它的ajax部分。

编写ajax，一方面可以经历处理问题的过程，提高技术能力；另一方面，有时候你的工作真的不需要这么大的库(框架)，那为什么不自己写呢？

让我们来看看流行的jQuery如何调用ajax。

$.ajax({ url: 'test.php '，//URL字符串用于发送请求类型： 'GET '，//发送方法dataType: 'json '，///服务器返回的预期数据类型：xml，html，text，json，jsonp，Script data: 'k=vk=v '，//发送数据async3360 true，//异步请求cache: false，//缓存的timeout: 5000，//超时这个称呼是不是很舒服很方便，如果你觉得舒服，也可以自己写参考这个设计方法，不用太复杂，正好满足你的需求。

首先了解ajax的基础知识。

XMLHttpRequest对象

XMLHttpRequest对象是ajax的核心，它向服务器发送异步请求，并从服务器获取数据。所有现代浏览器(IE7、Firefox、Chrome、Safari和Opera)都支持XMLHttpRequest对象(IE5和IE6使用ActiveXObject)。

创建一个兼容的XMLHttpRequest对象。

var xhr=窗口。XMLHttpRequest？新的XMLHttpRequest() :新的activexoobject(' Microsoft。XMLHTTP’)；

向服务器发送请求。

xhr.open(方法、url、异步)；//方法：请求的类型；或者getpost//URL:请求的URL//async: true(异步)或false(同步)xhr.send(字符串)；//发送请求到服务器//string:仅用于POST请求//GET比POST请求更简单快捷，大多数情况下都可以使用。//在下列情况下，请使用POST请求：//不能使用缓存文件(更新服务器上的文件或数据库)//向服务器发送大量数据(POST没有数据限制)//在发送包含未知字符的用户输入时，POST优于GET。

服务器响应

使用XMLHttpRequest对象的responseText或responseXML属性从服务器获取响应。

如果来自服务器的响应是XML，并且需要作为XML对象进行解析，请使用responseXML属性。

如果来自服务器的响应不是XML，请使用responseText属性，该属性将响应作为字符串返回。

Onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState更改时，onreadystatechange事件就会被触发。readyState属性存储XMLHttpRequest的状态信息。

XMLHttpRequest对象有三个重要属性：

OnreadyStatechange///存储一个函数(或函数名)，每当readystate属性更改时都会调用该函数。

ReadyState//存储XMLHttpRequest的状态，该状态从0更改为4。

03360请求未初始化1:服务器连接已建立2:请求已接收：请求处理4:请求已完成且响应就绪。

状态//200:“确定”，404:找不到页面。

在onreadyStatechange事件中，我们指定了当服务器响应准备好被处理时要执行的任务，当readystate等于4且状态为200时，响应就准备好了。

xhr . onreadystatechange=function(){ if(xhr . readystate==4xhr . status==200){//准备处理返回的xhr.responseText或xhr.responseXML } }一个简单的ajax请求如下：

var xhr=窗口XMLHttpRequest？新的XMLHttpRequest() :新的activexoobject('微软.XMLHTTP’)；xhr。onreadystatechange=function(){ if(xhr。readystate==4 xhr。status==200){//准备就绪可以处理返回的xhr.responseText或者xhr.responseXML } }xhr.open(方法、网址、异步);xhr.send(字符串);补充：1.发送得到请求时可能得到的是缓存的结果，为了避免这种情况，可以向统一资源定位器添加一个唯一的身份证，时间戳。2.如果需要像超文本标记语言表单那样邮政数据，使用setRequestHeader()来添加超文本传送协议头。然后在发送()方法中发送数据。

url=(url.indexOf('？') 0 ?'?': '') '_='(新日期());xhr。setrequestheader(' Content-type '，' application/x-www-form-URL编码')；开始写自己的创建交互式、快速动态网页应用的网页开发技术

先写一个基本的，定义好各种参数选项，供参考

var $=(function(){ //辅助函数序列化参数函数参数（数据){ //.}函数Ajax(opts){ var _ opts={ URL : '/'，//发送请求统一资源定位器地址键入： 'GET '，//发送请求的方式GET(默认)，POST数据类型： ' ',//预期服务器返回的数据类型xml，html，文本，json，jsonp，脚本数据： null，//发送的数据key=valuekey=value '，{key:value，key:value} async : true，//异步请求真实（默认异步)，假的缓存： true，//缓存真实（默认缓存),假超时： 5,//超时时间默认5秒load : function(){}，//请求加载中错误：函数(){}，//请求出错时success : function(){}，//请求成功时完成：函数(){} //请求完成之后（不论成功或失败)},中止=假，键，xhr=窗口XMLHttpRequest？新的XMLHttpRequest() :新的activexoobject('微软.XMLHTTP’)；用于(opts中的键)_ opts[key]=opts[key]；/* if(_ opts)。数据类型。tolowercase()===' script '){//.} if(_ opts。数据类型。tolowercase()===' jsonp '){//.} */if(_ opts。打字。touppercase()===' GET '){ if(param(_ opts)。数据)！==' '){ _ opts。URL=(_ opts。网址。的索引(？)) 0 ?'？': ' ')参数(_ opts。数据)；} !_ opts。cache(_ opts。URL=(_ opts。网址。的索引(？)) 0 ?'？': '') '_='(新日期()));}函数checktime out(){ if(xhr。readystate！==4){中止=真；xhr。abort()；} } setTimeout(checkTimeout，_ opts。超时* 1000)；xhr。onreadystatechange=function(){ if(xhr。readystate！==4)_ opts。load _ opts。加载(xhr)；if(xhr。readystate===4){ var s=xhr。状态，xhrdataif(！中止((s=200s 300)| | s===304)){ switch(_ opts。数据类型。tolowercase()){ case ' XML ' : xhradata=xhr。responsexml打破；case 'json': xhrdata=window .JSON窗口JSON.parse？JSON。解析(xhr。responsetext): eval('(' xhr。response text '))；打破；默认： xhr数据=xhr。responsetext} _ opts。成功选择。成功(xhr数据，xhr)；} else { _ opts。error _ opts。错误(xhr)；} _ opts。complete _ opts。完整(xhr)；} };xhr.open(_opts.type，_opts.url，_opts。异步)；if(_ opts。打字。touppercase()==' POST '){ xhr。setrequestheader('内容类型'，'应用程序/x-www-form-URL编码')；} xhr。send(_ opts。打字。touppercase()==' GET '？null : param(_ opts。数据))；}返回{ Ajax : Ajax } })；定义好了参数选项，来分析一下。其中数据类型是整个创建交互式、快速动态网页应用的网页开发技术的重点，代码的简单或者复杂都在它了。

在这里数据类型为预期服务器返回的数据类型：xml、html、文本、json、jsonp、脚本

1.为可扩展标记语言时，来自服务器的响应是XML，使用响应机器语言(Machine Language)属性获取返回的数据

2.为html、文本、json时，使用响应文本属性获取返回的数据

A.如果是html，它会返回纯文本的HTML信息，其中包含的脚本标签是否应该在插入dom时执行(代码复杂度3)。

B.当使用json时，应该返回JSON数据，这应该是安全、方便和兼容的(代码复杂度2)。

3.当使用jsonp时，它通常跨域使用，而不是原始的ajax请求，而是使用脚本创建方法(代码复杂性2)。

4.当它是脚本时：当你想跨域时，不需要原来的ajax请求，而是使用创建脚本的方法(代码复杂度1)；没有跨域，返回纯文本JavaScript代码，使用responseText属性获取返回的数据(代码复杂度1)。

其中，脚本标签、jsonp和html片段中的script都使用了创建脚本标签的方法。

将dataType作为json处理。

xhrdata=window。JSON窗口。JSON.parse？JSON . parse(xhr . responsetext): eval('(' xhr . responsetext ')')；

这是最简单的处理方式。为了与JSON兼容，您可以使用js2 . js

正在处理的数据类型是jsonp。

Jsonp通过脚本标签请求跨域。首先，了解以下流程：

上图中，a.html请求http://www.b.com/b.php?回调=add(Ajax程序中请求的url就是这个链接)，参数回调=add是从b.php读取的。根据得到的参数值(值为Add)，在JS语法中生成函数名，并将json数据作为参数传递给这个函数，将JS语法中生成的文档返回给a.html。a.html解析并执行返回的JS文档，并调用定义的Add函数。

通常，它在程序中以更通用的方式调用，例如下面广泛使用的loadJS函数：

函数loadJS(url，回调){ var doc=document，script=doc . createelement(' script ')，body=doc . getelementsbytagname(' body ')[0]；script . type=' text/JavaScript '；if(script . readystate){ script . onreadystatechange=function(){ if(script . readystate==' loaded ' | | script . readystate==' complete '){ script . onreadystatechange=null；回调回调()；} };} else { script . onload=function(){ callback callback()；};} script.src=urlbody.appendChild(脚本)；}将请求的url传递给loadJS函数，并得到相同的结果。

复制的代码如下： load JS(' http://www . b.com/b . PHP？callback=add ')；

因为脚本是动态创建的，所以如果请求成功返回，JS代码将立即执行。如果请求失败，则没有提示。因此，可以调用用户定义的参数选项：_opts.success，但不能调用_opts.error。

ajax处理jsonp也有两种情况：

1.设置参数callback=请求URL后的add后，特别是定义函数名add后，如果请求返回成功，JS代码会立即执行(这里是调用add({'a':8，' b':2})。

2.处理_opts.success中的JSON数据意味着请求成功返回，不执行JS代码，函数中的参数被移除并作为_opts.success的参数返回(这里相当于处理字符串‘add({ ' a ' :8，' b ' :2 })’)，并移除‘add(')。

将dataType处理为html。

如果您没有处理HTML片段中的脚本标签，只需将responseText返回值插入DOM树。如果要处理脚本，应该找出HTML片段中的脚本标签，单独处理一个脚本，注意脚本标签中包含的JS代码是否是通过src请求的。

将数据类型作为脚本处理。

如果你想跨域，用类似jsonp的方式创建脚本。如果没有跨域，请使用responseText属性来获取返回的数据，使用eval来执行代码，或者创建脚本来执行。

函数addJS(text) { var doc=document，script=doc . createelement(' script ')，head=doc . getelementsbytagname(' body ')[0]；script . type=' text/JavaScript '；script.text=textbody.appendChild(脚本)；}至此，ajax几乎被分析完了。根据实际需要，添加各种功能，思考每个功能是如何实现的，并找到解决方案。

以上内容是边肖与大家分享的。我自己写ajax不需要库(框架)。希望你喜欢。