什么是Ajax?
AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的 浏览器端网页开发技术。Ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎),使用户操作 与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证(比如判断用户是否输入了数 据)和数据处理(比如判断用户输入数据是否是数字)等都交给Ajax引擎自己来做, 只有确定需要从服务器读取 新数据时再由Ajax引擎代为向服务器提交请求。把这些交给了Ajax引擎,用户操作起来也就感觉更加流畅了。 传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
传统的请求方式
传统的web应用程序中,用户向服务器发送一个请求,然后等待,服务器接受到用户的请求然后响应。在这段时间内,用户会傻乎乎 的盯着一个空白页面看。这是因为以往的传输方式为同步处理方式。长久以来我们对这种web交互模式已经习惯了,并且以使用者的角度来讲已经觉得是理所当然的事情了。
Ajax的工作方式
和传统的web应用不同,Ajax采取了异步交互避免了用户请求-等待-应答交互方式的缺点。 Ajax在应用程序和服务器中引入了一个中间层---Ajax引擎,它是用Javascript编写的,在一个隐藏的框架中运行。Ajax引擎负责呈现用户界面, 以及代表用户和服务器进行交互。Ajax引擎允许用户和服务器进行异步的交互。用户无需傻乎乎的盯着空白页面。
针对Ajax会有几个常见问题
1、IE浏览器下面的缓存问题
2、跨域问题
3、Ajax乱码问题
4、Ajax对象属性的大小写问题
5、Ajax状态为0的问题
第一个问题,缓存问题:
在IE浏览器下面使用get请求时,如果第一次请求了数据之后IE会自动缓存数据,如果下一次再发送同样的 请求的时候浏览器会自动先去找缓存显示出来,所以如果请求的数据有变化的时候,这里是看不到变化的。 解决办法:xhr.open("get","xxxx.aspx?_dc="+new Date().getTime(),true);就是在请求的后面 加上_dc=。。。让url变成唯一,或者是,改成post请求。
第二个问题,跨域问题:
这是我们目前见到的最多的,也是最熟悉的一个问题。本地上面直接采用Nginx跨域实现。在服务器上的话,交给后端吧。。。 注意 Nginx跨域可以同时配置多个接口的,就是多写几个location就好了,然后location后面带的参数不一样就可以了。
第三个问题: Ajax乱码问题
乱码问题虽然我们目前遇到的不多,但是也属于比较常见的一个问题了。出现的主要原因就是编码不一致导致的。 如果出现乱码问题了,首先检查一下meta声明的charset要和请求的页面返回的charset一致。response.charset="gb2312 or utf-8"
第四个问题:Ajax对象属性的大小写问题,有些浏览器比如火狐,对大小写是敏感的,if (xhr.readystate==4)这种写法, 在IE下是成立的,但是在ff下就行不通了,因为IE不区分大小写,ff是区分大小的。标准写法为if (xhr.readyState==4),同理还有属性 responseText,responseXML。习惯采用驼峰形式的写法可以避免这个问题。
第五个问题:Ajax状态0的问题,有时候在测试Ajax代码的时候加了 xhr.status==200的判断后,一直不执行xhr.status==200的代码, 这个就需要注意了。xhr.status==200是要通过服务器确认后来返回的,在服务器页面没有发生错误或者转向时才返回200状态的, 此状态和你通过浏览器访问页面时服务器定义的状态一致。这个我们提前就跟后端对接好了,问题也不大。
可以使用jQuery和ang
jQuery方法
AngularJS方法
Javascript原生方法
HTTP请求的方法或动作,ajax请求方式 ("POST"或"GET"), 默认为"GET"。注意:其它 HTTP 请求方法,
如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
你需要请求的URL,总得告诉服务器请求的地址是什么吧?
请求头,包含一些客户端环境信息,身份验证信息等
请求体,也就是请求正文,请求正文中可以包含客户端提交的查询字符串信息,表单信息等等.
then()方法与其他两种方法的主要区别是,它会接收到完整的响应对象,信息更为全面,而success()和error()则会对响应对象进行析构,使用起来更为方便。