Ajax之从头分析

最新推荐文章于 2024-08-11 21:47:18 发布

Haozz_1994

最新推荐文章于 2024-08-11 21:47:18 发布

阅读量1.3k

点赞数 1

分类专栏： Java JavaScript 前端 Ajax Web 文章标签： Ajax Web

本文链接：https://blog.csdn.net/hz_940611/article/details/80850075

版权

本文详细介绍了Ajax的概念，包括同步与异步的区别，以及XMLHttpRequest对象在实现异步请求中的作用。通过实例解释了HTTP请求的原理，探讨了GET和POST请求的用途与区别。接着，深入解析了XMLHttpRequest的使用方法，包括发送请求和获取响应。最后，通过一个简单的例子展示了Ajax查询和新建员工信息，并讨论了JQuery中Ajax的使用以及跨域问题的解决方案，如jsonp和XHR2。

摘要由CSDN通过智能技术生成

不管你有没有接触过ajax开发，它的大名你一定听说过。可以说，没有ajax技术，就没有现在欣欣向荣的web开发的景象。那么什么是ajax呢。ajax的全称为Asynchronous JavaScript and XML，中文翻译为异步的JavaScript和XML。ajax并不是某种语言，而是一种技术。即无需重新加载整个网页的情况之下更够更新部分网页的技术。正是因为ajax技术，网页才可以实现异步更新，ajax改变了web开发的格局。

1-概念介绍

1.1-同步

比如你正在填写一张有100多个字段的表单，你花了两个小时填写完毕，点击提交，等了5分钟，服务器告诉你你少填了一个字段，然后你找到了这个字段，提交，服务器又告诉你少填写了一个字段...如此往复几遍之后，你终于确定所有的字段都已经填写，忐忑的点击提交，服务器又告诉你邮箱地址这一项重复了，估计你已经想砸电脑了。

这就是ajax出现之前的世界，只要稍微复杂一点的表单，填写起来都是噩梦。这就是我们说到的同步。

所谓同步，就是客户端发起请求，服务器端进行处理及响应，而这个过程客户端完全是在等待。当服务器端响应完成之后，客户端会重新载入页面，如果有错误，只能再次发起请求，再次等待。这就让人很无奈了...

1.2-异步

同样是上面的复杂的表单，当你填写到邮箱地址的时候，页面当时就把邮箱地址发送到服务器，服务器处理之后发现邮箱地址重复，将这个结果发送的页面。但是在这个过程中，你还是可以填写其他的内容，你可以给邮箱地址一栏添加样式，并不会重新刷新整个页面。这样一来，你所有的填写错误，都会在页面实时的显示出来，也可以实时的更正。这整合过程中，不会有整个页面的刷新、提交和等待。

这就是ajax技术出现之后的异步的世界，所谓异步，客户端发起请求，服务端进行处理及相应，而这时客户端完全可以进行其他操作，不需等待，页面的操作和服务器之间的操作不会造成堵塞。

那为什么之前不采用异步的方式呢？异步是怎么实现的？是因为同步的世界少了一个对象。

1.3-XMLHttpRequest

有了这个对象，就可以将同步变成异步，它可以用于后台和服务器交换数据，而且数据的交换不需加载整个页面。所以说，有了这个对象，才有了使用ajax实现异步请求，进行局部刷新。那么，如何实现ajax技术呢？需要以下内容：

运用HTML和CSS来实现页面，表达信息；

运用XMLHttpRequest和web服务器进行数据的异步交换；

运用JavaScript操作DOM，实现动态局部刷新。

我们主要来看第二点：运用XMLHttpRequest和web服务器进行数据的异步交换。XMLHttpRequest（以下简称XHR）究竟如何来使用呢？首先需要实例化一个XHR对象：

var request = new XMLHttpRequest();

目前来说，绝大多数浏览器都支持标准的XHR对象及其构造函数。但是对于早期的IE5及IE6浏览器，是不能直接new的，可以使用如下方法，只需要判断有没有XMLHttpRequest这种定义，然后采取不同的方法即可。（当然现在已经基本不考虑IE5和IE6了）

var request;
if(window.XMLHttpRequest){
   request = new XMLHttpRequest();//other broswer;
}else{
   request = new ActiveXObject("Microsoft.XMLHTTP");//IE5,IE6
}

2-HTTP请求

在学习XHR的相关知识之前，我们需要先来了解一下HTTP请求。

2.1-HTTP概念

HTTP仿佛一个最熟悉的陌生人。经常听到它的名字，但是对于它是什么以及它的原理却不是很清楚。HTTP是计算机通过网络进行通信的规则，是浏览器能够从web服务器请求信息和服务。它是一种无状态协议，也就是说服务端不保留连接的相关信息，当发起请求、返回响应之后，连接就被关闭了，整个处理过程是没有记忆的；如果后续的处理需要之前连接中传递的一些信息，那么只能重新传递。

一个完整的HTTP请求过程，通常有下面7个步骤：