Share Link php+ajax achieve content acquisition and dynamic modification

This post was last edited by hudie631489527 on 2011-08-16 09:24:20

Or because of work needs, do this share link function
This function looks relatively simple, to do well, it really takes a bit of time
Description, because the jquery package is really a bit large, most of the functions are not used here, so it is not used
Refer to the JS on the web, simply write a dot js to achieve this function
Three files:
parse_share.html Display Page
Parse.js receive data operations returned by PHP
parse.php Remote Data acquisition and processing analysis, return the JSON data format to JS
Watch the demo, please watch it here.

Here also give the source address: Share link php+ajax achieve content acquisition and dynamic modification (www.onlypo.com)

Or first of all the source code listed:
parse_share.html This file there's nothing to say

 
  Share Link php+ajax achieve content acquisition and dynamic modification   

Reply to discussion (solution)

parse.js This file content is more, involves the AJAX request, the page element dynamic generation, for the JSON data processing, inside the annotation should let everybody understand the
JS encapsulation's not very good, To JS more familiar with proficient friends can give a little more advice

var parseurl = '/test/parseurl/parse.php '; Local PHP Asynchronous parse file var limittime = 20;//Unit is seconds, set maximum request time var Clearto = Null;var IMGs = [];//picture set var Ajax = function () {funct Ion Request (URL,OPT) {function fn () {} var async = Opt.async!== false, method = Opt.meth od | | ' GET ', data = Opt.data | | NULL, DataType = Opt.datatype | | ' HTML ', success = Opt.success | | FN, failure = Opt.failure | |            fn            method = Method.touppercase ();          DataType = Datatype.touppercase (); if (method = = ' GET ' && data) {URL + = (url.indexof ('? ') = =-1?              '? ': ' & ') + data;          data = null;          } var xhr = _createhttprequest ();          Xhr.onreadystatechange = function () {_onstatechange (xhr,success,failure,datatype);          }; /* Focus, start setting up settimeout after the request is published, if the request status is not successful-readystate! = 4 then settimeout will run in 5 seconds, and a message will be displayed, if the request succeeds, the settimeout*/is cleared.       Clearto = SetTimeout (function () {xhr.abort ();//Terminate XMLHttpRequest Object Alert ("The system is busy, please re-refresh the page or try again later ...");        },limittime * 1000);          Xhr.open (Method,url,async);          if (method = = ' POST ') {xhr.setrequestheader (' content-type ', ' application/x-www-form-urlencoded; ');          } xhr.send (data);       return XHR; } function _createhttprequest () {var request = false;if (window). XMLHttpRequest) {request = new XMLHttpRequest ();} else if (window. ActiveXObject) {var versions = [' Microsoft.XMLHTTP ', ' MSXML. XMLHTTP ', ' microsoft.xmlhttp ', ' msxml2.xmlhttp.7.0 ', ' msxml2.xmlhttp.6.0 ', ' msxml2.xmlhttp.5.0 ', ' msxml2.xmlhttp.4.0 ', ' MSXML2. xmlhttp.3.0 ', ' MSXML2. XMLHTTP '];for (var i=0, icount=versions.length; i
 
  
= && S <) {if (DataType = = ' json ') {//Send JSON header information as much as possible, get better compatibility with JSON object Rescont = eval (' (' + xhr.responset ext + ') '); } else if (DataType = = ' xml ') {//server-side must specify XML header information so that all browsers know it is XML data in order to get XML object rescont = Xhr.responsexml;} elserescont = Xhr.re                Sponsetext;              Success (Rescont);              }else{failure (Xhr.responsetext);     }}else {}}, return {request:request}; } ();//Event binding function addnewthing (obj, ename, func) {if (Document.addeventlistener) {Obj.addeventlistener (ename, Func, FALSE);} else {obj.attachevent (' on ' +ename, Func);}} function Parseasynch () {//Get URL contents var newurl = document.getElementById (' parseURL '). Value;if (' http ') = = -1) return false; Ajax.request (parseurl,{data: ' url= ' +newurl,datatype: ' json ', Method: ' Post ', success:function (data) { document.getElementById ("append"). InnerHTML = "";//Clear Data IMGs = [];//data processing, data for JSON object//display a picture on the left//json (' div ', ' append ', ' ', ' clearboth ', ' image '_display '); Add a div to the outer layer//Display picture if (data.pic.length) {for (var i in data.pic) {if (i = = 0) {var imgojb_display = document.getElementById (' im Age_display '); var imgojb = document.createelement (' img '); imgojb.src = Data.pic[i];imgojb.id = ' Change_pic '; imgOjb_ Display.appendchild (IMGOJB);} Imgs[i] = Data.pic[i];}} Addnewobj (' div ', ' append ', ', ', ' float2 ', ' title_display '); Add a div//in the outer layer to display the title addnewobj (' span ', ' title_display ', Data.title, ' clearboth title ', ' Parse_title '); var titleobj = document.getElementById (' Parse_title '); Titleobj.onclick = function () {if (!document.getelementbyid (' Parse_title_ Input ')) fromtexttoinput (this);}; Titleobj.onmouseover = function () {this.classname = ' clearboth title backovercolor '}titleobj.onmouseout = function () { This.classname = ' Clearboth title '}//Show Urladdnewobj (' span ', ' title_display ', Newurl, ' Clearboth content1 ');// Display content addnewobj (' span ', ' title_display ', data.content, ' clearboth content ', ' parse_content '); var contentobj = document.getElementById (' parse_content '); contentobj. onclick = function () {if (!document.getelementbyid (' Parse_content_textarea ')) {Fromtexttotextarea (this);}}; Contentobj.onmouseover = function () {this.classname = ' clearboth content backovercolor '}contentobj.onmouseout = function () {this.classname = ' clearboth content '}//if more than one picture can be paged if (Data.pic.length > 1) {//Show page Flip button var pagecontent = "&  lt;< "PageContent + ="
  1-
  "+ (parseint (i) +1) +" ";p agecontent + =" >> "addnewobj (' span ', ' title_display ', PageContent, ' clearboth content ');}});} function Fromtexttoinput (obj) {var val = Obj.innerhtml;newobj = document.createelement (' input '); newobj.id = obj.id + ' _in Put '; newobj.type = ' text '; newobj.classname = ' Input_small '; newobj.onblur = function () {frominputtotext (this);} Newobj.value = val;obj.innerhtml = "; Obj.appendchild (NEWOBJ); Newobj.focus ();} function Frominputtotext (obj) {var val = Obj.value;obj.parentnode.onclick = function () {if (!document.getelementbyid (' Parse_title_input ') {fromtexttoinput (this);}} Remove Inputobj.parentNode.innerHTML = val;} function Fromtexttotextarea (obj) {var val = Obj.innerhtml;newobj = document.createelement (' textarea '); newobj.id = Obj.id + ' _textarea '; newobj.rows = 2;newobj.classname = ' Input_small '; newobj.onblur = function () {Fromtextareatotext ( this);} Newobj.value = val;obj.innerhtml = "; Obj.appendchild (NEWOBJ); Newobj.focus ();} function Fromtextareatotext (obj) {var val = Obj.value;obj.parentnoDe.onclick = function () {if (!document.getelementbyid (' Parse_content_textarea ')) {Fromtexttotextarea (this);}} Remove Textareaobj.parentNode.innerHTML = val;} The input tag Name property of IE and FF generates a different function addnewobj (Newobjtag, Parentobjtag, content, classname, idname) {var appendobjs = document.getElementById (Parentobjtag); var newObj = document.createelement (Newobjtag); if (content) newobj.innerhtml = Content;if (classname) Newobj.classname = classname;if (idname) newobj.id = Idname;appendobjs.appendchild (NEWOBJ);} function previmg () {//Gets the current picture URL in the number and position of var pos = parseint (document.getElementById (' Pregnum '). InnerHTML);//number of pictures var Picnum = imgs.length;if (pos <= 1) return false;//Picture object var picojb = document.getElementById (' change_pic ');//pre-loading of pictures,    Only in this way will the IE6 display the picture var img = new Image ();    Img.onload = function () {picojb.src = imgs[pos-2];    }; IMG.SRC = imgs[pos-2];//Current position changed document.getElementById (' Pregnum '). InnerHTML = pos-1;} function nextimg () {//Get the current picture URL in the number and position var pos = parseint (document.getElementById(' Pregnum '). InnerHTML);//the number of pictures var picnum = imgs.length; if (POS >= picnum) return false;    Picture object var picojb = document.getElementById (' change_pic '); var img = new Image ();    Img.onload = function () {picojb.src = Imgs[pos];  } img.src = imgs[pos];//current position changed document.getElementById (' Pregnum '). InnerHTML = pos + 1;}
 

Parse.php mainly uses the Curl request to the page, this is much more stable than the file,file_get_contents to get the page, thanks to its powerful simulation browser function abnormally
There are a few more:
1. For crawling back of the page to be further filtered
2. Since the page crawled back a bit different, so we need to get to the page encoding and then in the Iconv to turn the code (in the secondary mb_convert_encoding, which is due to the company server configuration environment Iconv function is not available)
3. Completion of the path to the captured picture
Okay, the source sticker.

 ]*?) \> (. *?) \<\/script>/si ",//Filter Script"/\<\!\-\-(. *?) \-\-\>/is ",//filter Notes"/\
 
  ]*?) \> (. *?) \<\/style>/is ",//filter CSS);  $cont = Preg_replace ($striparr, Array (', ', '), $cont); Some sites can not request too fast or too often, otherwise it will return unwanted values, such as the QQ site//Get the page encoding $match = array ();p Reg_match ("/
  
   ]*?) \s*content=\ "(. *?) (Charset= (. *?)) (.*?) \ "\s* ([^>]*?) \s*[\/]{0,1}\>/si ", $cont, $match); $charset = $match [5]?  $match [5]: ' Utf-8 '; Because the ICONV function on the server is not available, use the mb_convert_encoding function directly $cont = mb_convert_encoding ($cont, ' utf-8 ', $charset);//Get the article title, with the content $ Match = Array ();p Reg_match ("/
   
    (.*?) \<\/title\>/si ", $cont, $match);   $title = $match [1]; $match = Array ();p Reg_match ("/\
    
     
      
 ]*?) \> (. *?) \<\/body\>/usi ", $cont, $match); Remove HTML tags and special characters from content $content = Str_replace (Array ("\ r \ n", "\ n", "\ r", "\ T"), Array ("," "," "," "), Strip_tags ($match [2])) ; $middlepos = strlen ($content)/2; Utf-8 for three characters for a Chinese character, in order to avoid garbled appearance, in this corresponding to a multiple of 3//$remainder = $middlepos% 3;//if ($remainder) {$middlepos-= $remainder;}// To intercept a piece of text from the middle of the content $content = Mb_strcut ($content, $middlepos, utf-8);//echo substr ($content, $middlepos, 120);// Get the picture inside the article from Body preg_match_all ("/]*?) Src=\ "(. *?) \ "([^\>]*?) [\/] {0,1}>/i ", $match [2], $matchpics);  $piclist = $matchpics [2];//finishing picture if (!empty ($piclist) && Is_array ($piclist)) {foreach ($piclist as $k + = $v) {$v = Trim ($v), if (Empty ($v)) unset ($piclist [$k]); Remove excess images//If the picture is not the full path, refine his if (Stripos ($v, ' http://= = = = False) {$piclist [$k] = $dir. LTrim ($v, '/');}} echo Json_encode (' title ' = ' $title, ' content ' = ' $content, ' pic ' + $piclist);?>
     
    
   
  
 

A friend who needs this function or zero

I can not understand

Can see the effect of the demo Ah, address:
Http://www.onlypo.com/archives/16

It seems that everyone cares only more
This type of website has
A loyal cleaning

However, you need to be reminded that using JSON to return data is not Ajax, it can only be called Ajaj.

AJAX Asynchronous JavaScript and XML
Ajaj Asynchronous JavaScript and JSON

I went to see the demo address. How can I get nothing? Browser issues?

How?? See what you want, the effect, you can take??? In the?? Whether?

I went to see the demo address. How can I get nothing? Browser issues?
Server in foreign countries, you hit http://www.facebook.com, or other sites, as if the baidu.com server can not access
Http://www.csdn.net and so on is possible.

How?? See what you want, the effect, you can take??? In the?? Whether?
That's certainly not possible, only to get the data on the page

However, you need to be reminded that using JSON to return data is not Ajax, it can only be called Ajaj.

AJAX Asynchronous JavaScript and XML
Ajaj Asynchronous JavaScript and JSON
Well, not paying attention to that, and saying that makes sense, I was thinking that returning an XML has a lot of unnecessary content, so no XML is returned

Not bad.

Not bad

Ajax instance: Get site file content
Http://3aj.cn/article/65.html

