ajax请求原理
首先分析使用ajax时候有那些不确定的因素
请求:1 请求的方式不确定
2 请求的地址不确定
3 请求是否异步不确定
4 发送的数据不确定
响应:5 返回的数据不确定
6 响应成功之后 需要处理的业务不一样
7 响应失败之后 需要处理的业务不一样
然后封装一个ajax函数
1 先声明一个全局变量$ 在$下面申明一个ajax
注意:1 函数传的参数是一个对象 需要判断是否是一个对象和判断是否为空
2 options里面的参数需要处理 判断传入post还是get 如果都没传 设置默认值get
3 options 可以获取地址栏相关的信息
4 async 判断是否是异步 false是同步 true是异步
5 判断data是否传参 需要遍历生成字符串还需要加个&
然后进行ajax编程
1 设置请求
请求行
请求头 get 默认不要传 post传xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
请求主体 get 传null
响应
通讯完成 xhr.readyState==4
响应成功 xhr.status==200
可以根据响应类型判断获取什么数据
返回的类型包含xml字符串 json字符串 text字符串
调用用户传的 成功之后回调函数
调用用户传的失败回调函数
通讯完成回调
ajax相互交互的原理
ajax的原理简单来说通过XmlHTTPRequest对象来向服务器发异步请求 从服务器获取数据 然后用javascript来操作DOM从而更新页面 其中最关键的一部就是从服务器获取数据 要清楚这个过程和原理 我们必须对XMLHttprequest有所了解
XMLHttpRequest是ajax的核心机制 他从i5就开始引入 是一种支持异步请求的技术 简单来说就是javascript可以及时向服务器提出请求和处理响应 而不阻塞用户 达到无刷新的效果
XMLHttpRequest这个对象的属性
onreadystatechange 每次状态改变所触发事件的事件处理程序
responseText 从服务器进程返回数据 是字符串形式
responseXML 从服务器进程返回的DOM兼容文档数据对象
status 从服务器返回数子代码 常见的404未找到 和 200 请求成功
statusText 伴随状态码的字符串信息
readyState 对象状态 0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化) 对象已建立,尚未调用send方法
2 ajax封装 原理
1 创建xhr对象 也就是创建一个异步调用对象
var xhr = new XMLHttpRequest();
2 给这个对象设置请求报文
2.1 设置请求行
xhr.open('get','10.XMLHttpRequest.php?name=xgg&age=10');
xhr.open('post','10.XMLHttpRequest.php');
2.2 设置请求头
由于是get请求按照默认的设置即可 没有必要
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
2.3 设置请求主体 和发送功能
xhr.send(null); get请求
xhr.send('name=xgg&age=10');
3 这个对象处理响应报文
3.1 响应相关信息 必须等通讯完成才能去哪
3.2 什么时候响应完成
3.3 需要通过事件监听 onreadyStatechange
3.4 readystate 网络通讯状态码
4 响应已完成 获取异步调用返回的数据
5 使用javascript和dom现实局部刷新
3 ajax请求时 如何解释json数据
使用eval()或者JSON.parse() 鉴于安全考虑 推荐使用JSON.parse()
JSON.parse(jsonobj) 将json字符串转化为对象
JSON.stringify(jsonobj); 可以将json对象转换成json对符串
ajax请求原理的更多相关文章
- ajax请求原理及jquery $.ajax封装全解析
.ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...
- 判断是否是Ajax请求
Request.IsAjaxRequest()判断是否是ajax请求原理:Http协议上有个X-Requested-With:XML HttpRequest属性判断的 mvc后台通过Request可以 ...
- 前后端数据交互(二)——原生 ajax 请求详解
一.ajax介绍 ajax 是前后端交互的重要手段或桥梁.它不是一个技术,是一组技术的组合. ajax :a:异步:j:js:a:和:x:服务端的数据. ajax的组成: 异步的 js 事件 其他 j ...
- AJAX异步请求原理和过程
AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方法. AJAX 基于 JavaS ...
- Ajax请求URL后加随机数原理
原文:Ajax请求URL后加随机数原理 例如: $.ajax({ type: "GET", url: "login.action?ran=& ...
- 详解Ajax请求(二)——异步请求原理的分析
在上一文章里,我们分析了同步请求的原理.当浏览器向服务器发送同步请求时,服务处理同步请求的过程中,浏览器会处于等待的状态,服务器处理完请求把数据响应给浏览器并覆盖浏览器内存中原有的数据,浏览器重新加载 ...
- Ajax服务请求原理 简单总结
刚开始以为Ajax是一种新的语言,接触之后才知道,ajax是用于服务器交换数据并更新部分网页的Web应用程序的技术. 第一次看到Ajax请求代码时,感觉一脸萌逼,这些代码竟然把后台数据请求过来了,神奇 ...
- Ajax - 发送请求原理
1,什么是ajax? Asynchronous JavaScript and XML(当然现在xml已经由json代替): 主要是用于前后台的交互(表单提交已经被废弃): 使用场景:前台获取数据.表单 ...
- Ajax异步请求原理的分析
我们知道,在同步请求模型中,浏览器是直接向服务器发送请求,并直接接收.处理服务器响应的数据的.这就导致了浏览器发送完一个请求后,就只能干等着服务器那边处理请求,响应请求,在这期间其它事情都做不了.这就 ...
随机推荐
- eclipse汉化教程,新手神器
网盘下载地址:http://pan.baidu.com/s/1i5ed6ZF 下载汉化包 将汉化包里的两个文件存放到eclipse安装目录中的dropins文件夹中 重启eclipse 汉化成功
- java面试基础题(三)
程序员面试之九阴真经 谈谈final, finally, finalize的区别: final:::修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承.因此 ...
- Java基础——封装
最近学习Java面向对象方面的知识点,一直没时间更新博客,因为这块的知识点真的蛮绕的.一个知识点一个知识点的往外冒,而且对于我这个初学者来说区分构造器和方法就花费了一整天的时间.现在准备再重新过一遍知 ...
- rsync的用法
一.用法例子 1.增量备份本地文件#rsync -av ebook/ tmp/ //注意:文件名中最好不要有 :#rsync -avzrtopgL --progress /src /dst 2.本地和 ...
- [1] [转]软件架构之三层架构和MVC的关系
注:本文章内所有内容都来自互联网,本人主要是起了一个收集的作用 又看到有人在问三层架构和MVC的关系,感觉这种问题有点教条化了.因为它们都在逻辑上将应用程序划为三块,凑了一个数字3,就有人非要把它们联 ...
- Scrapyd部署爬虫
Scrapyd部署爬虫 准备工作 安装scrapyd: pip install scrapyd 安装scrapyd-client : pip install scrapyd-client 安装curl ...
- 宠物收养场 Treap
宠物收养场 时间限制: 1 Sec 内存限制: 128 MB 题目描述 凡凡开了一间宠物收养场.收养场提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物. 每个领养者都希望领养到自己满意的宠 ...
- SOD开源框架MSF(消息服务框架)进阶篇
复习:在上一篇我介绍了MSF的基本订阅,模式就是,客户端A,订阅服务器.客户端B,订阅服务器.通过服务器广播消息, 所有订阅过的客户端都能接到消息. 进阶:在上一篇的基础上,增加客户端A,发送信息到服 ...
- php中的冒泡排序算法
<?php //php中的冒泡排序算法 //从大到小的排序方式 ,$arr[$j]>$arr[$j+1](这里换成了从小到大的排序方式) $arr=array(); $arr=array( ...
- HTML DOM元素关系与操作
<html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...